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近年 来 随 着 网 络 信息 技术 的 广泛 应 用 ， 越 来 越 多 的 个 人 、 企 业 等 纷纷 建立 自己 的 网 站 ， 利 用 网 
站 来 宣传 推广 自己 。 网 页 技术 已 经 成 为 当代 青年 学 生 必 备 的 知识 技能 。 目 前 大 部 分 制作 网 页 的 方式 
都 是 运用 可 视 化 的 网 页 编辑 软件 ， 这 些 软件 的 功能 相当 强大 ， 使 用 非常 方便 。 但 是 对 于 高 级 网 页 制 
作 人 员 来 讲 ， 仍 需 了 解 HIML、CSS 等 网 页 设计 语言 和 技术 的 使 用 ， 这 样 才能 充分 发 挥 自己 丰富 的 
想象 力 ， 更 加 随心 所 欲 地 设计 符合 标准 的 网 页 ， 以 实现 网 页 设计 软件 不 能 实现 的 许多 重要 功能 。 


本 书 主要 内 容 
本 书 紧 密 围绕 网 页 设计 师 在 网 页 制作 过 程 中 的 实际 需要 和 应 该 掌握 的 技术 ， 全 面 介 绍 了 使 用 
HTML、CSS 进 行 网 页 设计 和 制作 的 各 方面 内 容 和 技巧 。 本 书 不 只 注重 语法 讲解 ， 还 通过 一 个 个 鲜 
活 、 典 型 的 实战 案例 来 帮助 读者 达到 学 以 致 用 的 目的 。 每 个 语法 都 有 相应 的 实例 ， 每 课 后 面 又 配 有 
综合 小 实例 。 
本 书 共 15 课 分 为 3 部 分 ， 主 要 内 容 介 绍 如 下 。 
第 1 篇 HTML 篇 
本 部 分 由 第 1 一 8 课 组 成 ， 主 要 讲述 HTML 文件 的 基本 结构 、HTMIL 文 件 编写 方法 、 HTML 基 本 
标记 、 设 置 文字 、 段 落 与 列表 、 图 像 和 多 媒体 的 创建 、 超 链接 和 表单 、 表 格 的 创建 、HTML 5 的 新 
特性 、HTML 5 的 结构 等 。 介 绍 如 何 使 用 HTML 语 言 标记 ， 如 何 运用 这 些 标记 在 Web 页 面 中 生成 特殊 
效果 ， 并 且 对 每 课 的 属性 和 方法 进行 了 详细 的 解析 ， 同 时 还 运用 了 大 量 的 实例 加 以 说 明 。 
第 2 篇 “CSS 篇 
本 部 分 由 第 9 一 14 课 组 成 。 在 本 部 分 中 首先 介绍 CSS 的 基本 概念 和 添加 方法 。 然 后 介绍 CSS 控 制 
网 页 文本 和 段落 样式 、 用 CSS 设 计 图 片 和 背景 、 用 CSS 制 作 实用 的 菜单 和 网 站 导航 、CSS 盒 子 模型 与 
定位 、 元 素 的 定位 方式 、CSS 布 局 理念 、 常 见 的 布局 类 型 。 
第 3 篇 ”综合 案例 篇 
本 部 分 由 第 15 课 组 成 ， 采 用 最 流行 的 CSS+DIV 布 局 的 方法 ， 综 合 讲述 企业 网 站 制作 方法 ， 教 会 
读者 如 何 将 各 个 知识 点 应 用 于 一 个 实用 系统 中 ， 和 避免 读 者 只 学 习 停留 于 表面 、 局 限于 理论 的 知识 ， 
使 读者 能 将 所 学 的 知识 可 以 马上 应 用 于 其 实际 工作 中 。 


本 书 主要 特色 
@ ”知识 全 面 系统 
本 书 内 容 完全 从 网 页 创建 的 实际 角度 出 发 将 所 有 HTML、CSS 元 素 进行 归 类 ， 每 个 标记 的 语 


J ~ ”证 


属性 和 参数 都 有 完整 详细 的 说 明 ， 信 息 量 大 ， 知 识 结构 完 
@ ”典型 实例 讲解 

本 书 的 每 课 都 配 有 大 量 实用 案例 ， 将 本 课 的 基础 知识 综合 贯穿 起 来 ， 力 求 达 到 理论 知识 与 实际 
操作 完美 结合 的 效果 。 
(@) 配合 Dreamweaver 进 行 讲解 

本 书 以 浅显 的 语言 和 详细 的 步骤 介绍 了 在 可 视 化 网 页 软件 Dreamweaver 中 ， 如 何 运 用 HTML、 
on 
Dreamweaver 中 创建 完整 网 页 的 过 程 。 
”代码 支持 

本 书 提供 实例 和 综合 案例 的 源 代码 ， 可 让 读者 在 实战 应 用 中 掌握 网 页 设计 与 制作 的 每 一 项 技能 。 
@ 配 图 丰富 ， 效 果 直观 

对 于 每 一 个 实例 代码 ， 本 书 都 配 有 相应 的 效果 图 ， 读 者 无 须 自己 进行 编码 ， 也 可 以 看 到 相应 的 
运行 结果 或 者 显示 效果 。 在 不 便 上 机 操作 的 情况 下 ， 读 者 也 可 以 根据 书 中 的 实例 和 效果 图 进行 分 析 
和 比较 。 
@ 习题 强化 
每 课 后 都 附 有 针对 性 的 练习 题 ， 通 过 实 训 巩固 每 章 所 学 的 知识 。 
本 书 读者 对 象 
网 页 设计 与 制作 人 员 
网 站 建设 与 开发 人 员 
大 中 专 院 校 相 关 专 业 师 生 
网 页 制作 培训 班 学 员 
个 人 网 站 爱好 者 与 自学 读者 
本 书 是 集体 创作 的 结果 ， 参 加 本 书 编写 的 人 员 有 : 张 忠 琼 、 冯 雷 雷 、 晃 辉 、 陈 石 送 、 何 琛 、 吴 
秀 红 、 王 冬 霞 、 何 本 军 、 乔 海 丽 、 邓 仰 伟 、 孙 雷 杰 、 孙 文 记 、 何 立 、 倪 庆 军 、 胡 秀 娥 、 赵 良 涛 、 徐 
曦 、 刘 桂香 、 葛 俊 科 、 葛 俊 彬 等 。 由 于 时 间 所 限 ， 书 中 疏漏 之 处 在 所 难免 ， 奶 请 广大 读者 朋友 批评 
指正 。 
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什么 是 RTML .es 2 | 


HTML 文 件 的 基本 结构 … 
1.2.1 HTML 文件 结构 ……. 
1.2.2 编写 HTML 文 件 注意 事项 . 


HTML 文 件 编写 方法 
1.3.1 课堂 小 实例 一 使 用 记事 本 编写 


1.3.2 课堂 小 实例 一 一 使 用 Dreamweaver 

编写 HTML 页 面 
HTML 页 面 主 体 常用 设置 
1.4.1 课堂 小 实例 一 一 定义 网 页 背 


当世 MD ss 5 | 


1.4.2 ”课堂 小 实例 一 一 设置 背 


景 图 片 (background ) pp 6 | 


1.4.3 ”课堂 小 实例 一 一 设置 文字 颜色 (text) …7 
1.4.4 ”课堂 小 实例 一 一 设置 链接 文字 属性 …….8 


1.4.5 课堂 小 实例 一 -设置 页 面 边 距 .……… 10 
1.5 ”页 面 头 部 元 素 <head> 和 <IDOCTYPE>..10 
1.6 ”页 面 标题 元 素 <title> .…..….............. 11 


1.7 ”元 信息 元 素 <meta> 
1.7.1 课堂 小 实例 一 一 设置 页 面 描述 
1.7.2 课堂 小 实例 一 一 定义 页 面 的 搜索 方式 ….12 
1.7.3 ”课堂 小 实例 一 一 定义 页 面 的 跳 转 …… 13 
1.7.4 课堂 小 实例 一 一 设置 页 面 关键 字 .…… 14 


1.8 综合 实战 一 -创建 基本 的 HTML 文 件 . 14 
1.9 ， 课 后 练习 15 
1.10 ”本 课 小 结 16 


第 2 课 用 HTML 设 置 文字 与 段落 格式 


2.1 


2 这 


2.3 


2.1.1 课堂 小 实例 一 -输入 空格 符号 .… 
2.1.2 输入 特殊 符号 


设置 文字 的 格式 19 | 
2.2.1 课堂 小 实例 一 设置 字体 (face).….19 | 


2.2.2 课堂 小 实例 一 一 设置 字号 (size) 


2.2.3 ”设置 文字 颜色 (color) 2 


2.2.4 设置 粗 体 、 斜 体 、 下 划 线 
(b、 strong、 em、 u) 

2.2.5 设置 上 标 与 下 标 (Sup、sub) 

2.2.6 多 种 标题 样式 的 使 用 
(<h1> 一 <h6>) .… 


设置 段落 的 排版 与 换行 


2.3.1 给 文字 进行 分 段 〈(p) 25 | 


2.3.2 ”段落 的 对 齐 属 性 (align) .…………..25 
2.3.3 不 换行 标记 nobr) 
2.3.4 ”换行 标记 (br) 


2.4.2 设置 水 平 线 宽度 与 高 度 属性 
(width、size) 

2.4.3 ”设置 水 平 线 的 颜色 (color).… 

2.4.4 ”设置 水 平 线 的 对 齐 方式 (align) .……… 31 

2.4.5 水平线 去 掉 阴 影 (noshade) .… 

2.5 设置 滚动 文字 … 
2.5.1 滚动 文字 标签 一 marquee 

2.5.2 滚动 方向 属性 一 -direction .… i 

25.3 滚动 方式 属性 一 -behavior 


课堂 实录 
2.5.4 滚动 速度 属性 一 -scrollamount . 
2.5.5 ”滚动 延迟 属性 一 一 scrolldelay. 
2.5.6 ”滚动 循环 属性 一 loop 
2.5.7 ”滚动 范围 属性 一 width、height 
2.5.8 滚动 背景 颜色 属性 一 bgcolor 
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2.6 
2 
2.8 


2.5.9 滚动 空间 属性 一 -hspace、vspace ... 39 
合 实例 一 一 设置 页 面 文本 及 段落 .40 


本 课 小 结 … 


第 3 课 ”用 HTML 创 建 精彩 的 图 像 和 多 媒体 页 面 


3.1 
3.2 


网 页 中 常见 的 图 像 格式 


插入 图 像 并 设置 图 像 属性 
3.2.1 
322 


(height) 


3.2.3 


3.2.4 
课堂 小 实例 一 一 设置 图 像 水 平 间距 
(hspace) 
课堂 小 实例 一 一 设置 图 像 垂 直 间距 
(vspace) . 

课堂 / \ 实 例 一 设置 图 像 的 对 齐 方式 
Cn 
课堂 / 


3.2.5 


3.2.6 


3.2.7 


3.2.8 


4.1 链接 和 路 径 …… 


链接 和 路 径 
4.1.1 超 链 接 的 基本 概念 
4.1.2 课堂 小 实例 一 -路径 url.. 
4.1.3 ”课堂 小 实例 一 HTTP 路 径 . 
4.1.4 课堂 小 实例 一 FTP 路 径 … 
4.1.5 “课堂 小 实例 一 一 邮件 路 径 … 


4.2.1 课堂 小 实例 一 指定 路 径 href. 
4.2.2 ”显示 链接 目标 属性 target.……- 
4.2.3 ”链接 的 热 键 属性 accesskey.… 


4.3 创建 图 像 的 超 链接 
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3.4 


3.5 


3.6 
3.7 


4.4 
4.5 
4.6 
4.7 


添加 多 媒体 文件 51 
3.3.1 课堂 小 实例 一 添加 多 媒体 文件 标记 
En 2 
3.32 课堂 小 实例 一 设置 自 ; 
让 52 
添加 背景 音乐 ………… 53 
3.4.1 课堂 小 实例 一 一 设置 背景 音乐 
(bgsound) 
3.4.2 课堂 小 实例 一 一 设置 循环 播放 次 数 
(HOOID DE sdasimi onsddst er seedsenieanasst 54 
全 守 例 Me sl 


3.5.1 实例 1 一 一 创建 多 媒体 网 页 
3.5.2 ”实例 2 一 一 创建 图 文 混合 排版 网 页 


课 后 练习 
本 课 小 结 


第 4 课 用 HTML 创 建 超 链接 


课堂 小 实例 一 一 创建 链接 区 域 元 素 


链接 区 域 的 名 称 属性 name 
定义 鼠标 敏感 区 元 素 <area> 
链接 的 路 径 属性 href、nohref 
鼠标 敏感 区 坐标 属性 coords. 


第 $ 课 ”使 用 HTML 创 建 强 大 的 表格 


5.1 创建 并 设置 表格 属性 


5.1.1 课堂 小 实例 一 一 表格 的 基本 标记 
(table、 tr、 td) 
5.1.2 课堂 小 实例 一 一 表格 宽度 和 高 度 
(width、height) 


5.1.3 ”课堂 小 实例 一 表格 的 标题 


BO TOO OR 78 
5.1.4 课堂 小 实例 一 一 表格 的 表 头 (th) .…. 79 
5.1.5 课堂 小 实例 一 一 表格 对 齐 方式 

CO en 80 
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5.1.6 表格 的 边框 宽度 (border) . 
5.1.7 表格 边框 颜色 (bordercolor) . 
5.1.8 单元 格 间距 (cellspacing) 
5.1.9 单元 格 边 距 〈cellpadding) .… 


5.1.10 ”表格 的 背景 色 〈bgcolor) .…. 
5.1.11 表格 的 背景 图 像 (background) .…. | 
表格 的 结构 标记 -7 87 a 


5.2.1 课堂 小 实例 一 一 设计 表 头 样式 


让 87 | 
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5.2.2 课堂 小 实例 一 一 设计 表 主 体 样式 


0 a 88 
5.2.3 ”课堂 小 实例 一 一 设计 表 尾 样式 
HOG es emda ea 88 
实例 一 一 使 用 表格 排版 网 页 ……90 
课 后 练习 … 
ee 94 


第 6 课 ”创建 交换 式 表单 
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6:2 


表单 元 素 00> vada 96 | 
6.1.1 课堂 小 实例 一 动作 属性 (action) ..96 | 
6.1.2 ”课堂 小 实例 一 一 发 送 数据 方式 属性 | 

EO. ns en 96 | 
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在 制作 网 页 时 ， 大 都 采用 一 些 专门 的 网 页 制作 软 
件 ， 如 FrontPage、Dreamweaver。 这 些 软件 都 是 所 见 
即 所 得 的 ， 非 常 方便 。 使 用 这 些 编辑 软件 可 以 不 用 编 
写 代 码 ， 在 不 熟悉 HTML 语 言 的 情况 下 ， 照 样 可 以 制作 
网 页 。 这 是 网 页 编辑 软件 的 最 大 成 功 之 处 ， 但 也 是 它们 
的 最 大 不 足 之 处 。 它 们 受 软件 自身 的 约束 ， 将 产生 一 些 
垃圾 代码 ， 这 些 垃圾 代码 将 会 增 大 网 页 体积 ， 降 低 网 页 
的 下 载 速度 。 一 个 优秀 的 网 页 设计 者 应 该 在 掌握 可 视 化 
编辑 工具 的 基础 上 ， 进 一 步 熟 悉 HTML 语 言 以 便 清除 那 
些 垃圾 代码 ， 从 而 达到 快速 制作 高 质量 网 页 的 目的 。 这 
就 需要 读者 对 HTML 有 个 基本 的 了 解 ， 因 此 具备 一 定 和 
TML 语 言 的 基本 知识 是 必要 的 。 


技术 要 点 

什么 是 HTML 

掌握 HTML 文 件 的 基本 结构 
掌握 HTML 文 件 编写 方法 
掌握 HTML 页 面 主体 常用 设置 
掌握 页 面 头 部 元 素 <head> 
掌握 页 面 标题 元 素 <title> 
掌握 元 信息 元 素 <meta> 


掌握 基本 的 HTML 文 件 创建 的 方法 


太 
太 
六 
六 
六 
六 
六 
六 
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上 网 冲浪 〈 即 浏览 网 页 ) 时 ， 呈 现在 人 们 面前 的 一 个 个 漂亮 的 页 面 就 

是 网 页 ， 它 们 是 网 络 内容 的 视觉 呈现 。 网 页 是 怎样 制作 的 呢 ? 其 实 网 页 的 主体 是 一 个 用 HIML 
代码 创建 的 文本 文件 ， 使 用 HTML 中 的 相应 标签 ， 就 可 以 将 文本 、 图 像 、 动 画 及 音乐 等 内 容 包 
含 在 网 页 中 ， 再 通过 浏览 器 的 解析 ， 多 姿 多 彩 的 网 页 内 容 就 呈现 出 来 了 。 

HTML 的 英文 全 称 是 Hyper Text Markup Language， 中 文通 常 称 作 超 文本 标记 语言 或 超 文本 
标签 语言 ，HTML 是 Intemet 上 用 于 编写 网 页 的 主要 语言 ， 它 提供 了 精简 而 有 力 的 文件 定义 ， 可 
以 设计 出 多 姿 多 彩 的 超 媒 体 文件 。 通 过 HTTP 通 信 协 议 ，HTMIL 文 件 可 以 在 全 球 互 联网 (World 
Wide Web) 上 进行 跨 平 台 的 文件 交换 。 
1. HTML 的 特点 

HTML 文 档 制 作 简单 ， 且 功能 强大 ， 支 持 不 同 数据 格式 的 文件 导入 ， 这 也 是 WWW 盛 行 的 
原因 之 一 ， 其 主要 特点 如 下 。 

(1) HTML 文 档 容易 创建 ， 只 需 一 个 文本 编辑 器 就 可 以 完成 。 

(2) HTML 文 件 存 贮 量 小 ， 能 够 尽 可 能 快 地 在 网 络 环境 下 传输 与 显示 。 

(3) 平台 无 关 性 。HTML 独 立 于 操作 系统 平台 ， 它 能 对 多 平台 兼容 ， 只 需要 一 个 浏览 
器 ， 就 能 够 在 操作 系统 中 浏览 网 页 文件 。 可 以 使 用 在 广泛 的 平台 上 ， 这 也 是 WWW 盛 行 的 另 一 个 

(4) 容易 学 习 ， 不 需要 很 深 的 编程 知识 。 

(5) 可 扩展 性 ，HIML 采 取 子 类 元 素 的 方式 ， 为 系统 扩展 带 来 保证 。 
2. HTML 的 历史 

HTML 1.0 : 1993 年 6 月 ， 互 联网 工程 工作 小 组 (IETF) 工作 草案 发 布 。 

HTML 2.0 : 1995 年 11 月 发 布 。 

HTML 3.2 : 1996 年 1 月 W3C 推 荐 标准 发 布 。 

HTML 4.0 : 1997 年 12 月 W3C 推 荐 标准 发 布 。 

HTML 4.01: 1999 年 12 月 W3C 推 荐 标准 发 布 。 

HTML 5.0 : 2008 年 8 月 W3C 工 作 草 案 发 布 。 


| 网 HTML 文 件 的 基本 结构 


编写 HTML 文 件 时 ， 必 须 遵循 一 定 的 语法 规则 。 一 个 完整 的 HTML 文 

件 由 标题 、 段 落 、 表 格 和 文本 等 各 种 做 入 的 对 象 组 成 ， 这 些 对 象 统称 为 元 素 。HIML 使 用 标签 
来 分 隔 并 描述 这 些 元 素 ， 整 个 HTML 文件 其 实 就 是 由 元 素 与 标签 组 成 的 。 
| 1.2.1 HTML 文 件 结构 

HTML 的 任何 标签 都 由 “<” 和 “>” 围 起 来 ， 如 <HTML>。 在 起 始 标签 的 标签 名 前 加 上 符 
号 “/” 便 是 其 终止 标签 ， 如 </HIML>， 夹 在 起 始 标签 和 终止 标签 之 间 的 内 容 受 标签 的 控制 。 
超 文本 文档 分 为 头 和 主体 两 部 分 ， 在 文档 头 部 ， 对 文档 进行 了 一 些 必 要 的 定义 ， 文 档 主体 是 要 
显示 的 各 种 文档 信息 。 


基本 语法 : 


语法 说 明 : 


不 能 省 略 ， 表 示 正 文 内 容 的 开始 。 


下 面 就 以 一 个 简单 的 HTML 文 件 来 熟悉 | 


HTML 文 件 的 结构 。 
实例 代码 : 


这 一 段 代码 是 由 HTML 中 最 基本 的 几 个 | 


什 1.2.2 编写 HTML 文 件 注意 事项 


其 中 <html> 在 最 外 层 ， 表 示 这 对 标签 间 | 
的 内 容 是 HTML 文 档 ， 一 个 HTML 文 档 总 是 以 ; 
<html> 开 始 ， 以 </html> 结 束 。<head> 之 间 包 | 
括 文档 的 头 部 信息 ， 如 文档 标题 等 ， 若 不 需 | 
头 部 信息 则 可 省 略 此 标签 。<body> 标 签 一 般 ; 
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i 标签 所 组 成 的 ， 运 行 代码 ， 在 浏览 器 中 预览 
| 效果 ， 如 图 1-1 所 示 。 


图 1-1 HTML 文 件 结构 
下 面 解释 一 下 上 面 的 例子 。 
HTML 文 件 就 是 一 个 文本 文件 。 文 本 文 
件 的 后 缀 名 是 .txt， 而 HTML 的 后 缀 名 
是 .html。 
HTML 文 档 中 ， 第 一 个 标签 是 <!doctype 
html>， 这 个 标签 告诉 浏览 器 这 是 HTML 文 
档 的 开始 。 
HTML 文 档 的 最 后 一 个 标签 是 </html>， 
这 个 标签 告诉 浏览 器 这 是 HTML 文 档 的 终止 。 
在 <head> 和 </head> 标 签 之 间 的 文本 是 头 信 
息 ， 在 浏览 器 窗口 中 ， 头 信息 是 不 被 显示 在 
页 面 上 的 。 
在 <title> 和 </title> 标 签 之 间 的 文本 是 文档 
标题 ， 它 被 显示 在 浏览 器 窗口 的 标题 栏 。 
在 <body> 和 </body> 标 签 之 间 的 文本 是 正 
文 ， 会 被 显示 在 浏览 器 中 。 
在 <p> 和 </p> 之 间 的 标签 代表 段落 。 


HTML 由 标签 和 属性 构成 ， 在 编写 文件 时 ， 要 注意 以 下 几 点 。 


“<” 和 “>” 是 任何 标签 的 开始 和 结束 。 元 素 的 标签 要 用 这 对 尖 括 号 括 起 来 ， 并 且 在 结束 


标签 的 前 面 加 一 个 “/” 斜 枉 ， 如 <table></table>。 


在 源 代 码 中 不 区 分 大 小 写 。 


对 对 


行 换行 。 
在 HIML 标 等 中 可 以 放置 各 种 属性 ， 如 : 


对 


任何 回 车 和 空格 在 源 代 码 中 均 不 起 作用 。 为 了 代码 的 清晰 ， 建 议 不 同 的 标签 之 间 用 回 车 进 


| 同 课堂 实录 “ee 一 他 


其 中 align 为 h1 的 属性 ，right 为 属性 值 ， 元 素 属 性 出 现在 元 素 的 <> 内 ， 并 且 和 元 素 名 之 问 有 
一 个 空格 分 隔 ， 属 性 值 可 以 直接 书写 ， 也 可 以 使 用 "" 括 起 来 ， 如 下 面 的 两 种 写法 都 是 正确 的 。 


太 ”要 正确 输入 标签 。 输 入 标签 时 ， 不 要 输入 多 余 的 空格 ， 否 则 浏览 嚣 可 能 无 法 识别 这 个 标签 ， 
导致 无 法 正确 地 显示 信息 。 

太 ”在 HTMIL 源 代码 中 注释 。<!-- 要 注释 的 内 容 --> 注 释 语 句 只 出 现在 源 代码 中 ， 不 会 在 浏览 器 
中 显示 。 


] 3 HTML 文 件 编写 方法 


由 于 HTML 语 言 编写 的 文件 是 标准 的 ASCII 文 本 文件 ， 因 此 可 以 使 用 
任意 一 ei 例如 Windows 系 统 中 自 带 的 记事 本 。 如 果 使 用 
Dreamweaver、FrontPage 等 软件 ， 则 能 以 可 视 化 的 方式 进行 网 页 的 编辑 制作 等 。 


国 1.3.1 课堂 小 实例 一 一 使 用 记事 本 编写 HTML 页 面 一 一 一 一 一 0 


HTML 是 一 个 以 文字 为 基础 的 语言 ， 并 | 
不 需要 什么 特殊 的 开发 环境 ， 可 以 直接 在 | 
Windows 自 带 的 记事 本 中 编写 。HTMIL 文 档 ; 
以 .html 为 扩展 名 ， 将 HTML 源 代码 输入 到 记 | 
事 本 并 保存 ， 可 以 在 浏览 器 中 打开 文档 以 查 | 
看 其 效果 。 使 用 记事 本 手工 编写 HTML 页 面 的 | 
具体 操作 步骤 如 下 。 : 
在 Windows 系 统 中 ， 打 开 记事 本 ， 在 记事 本 ; 

中 输入 以 下 代码 ， 如 图 1-2 所 示 。 | 


| 加 当 编辑 完 HTML 文 件 后 ， 选择“ 文件 ”| “ 另 
-| 丰 为 ”命令 ， 弹 出 “另存 为 ”对 话 杠 ， 将 
i | 它 存 为 扩展 名 为 htm 或 html 的 文件 即 可 ， 如 


TS 
es 图 1-3 所 示 。 


me src="images/index. jpe” width="1007” height="589” /> 
Ea 


图 1-2 在 记事 本 中 输入 代码 


0 Al Docwmerts Crore pbk htme" stmt" hnl at son appeecher mt ae | | 
se [eres | 
! | Snax Ee 


: 图 1-3 保存 文件 
| 国 单 击 “ 保 存 ”按钮 ， 这 时 该 文本 文件 就 变 
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成 了 HTMIL 文 件 ， 在 浏览 器 中 浏览 ， 效 果 | 档 ， 在 “代码 视图 ”中 编写 HIML 人 代码， 如 


如 图 1-4 所 示 | 图 1-5 所 示 。 


CE TE 


图 1-4 浏览 网 页 效果 | 7 


| 1.3:2 课堂 小 实例 一 一 使 用 在 Dreamweaver 中 编辑 完 代 码 后 


到 


Dreamweaver 编 写 。 ” “设计 视图 ”中 ， 效果 如 图 6 所 示 ， 
| emaeeeesaaaaga 
HTML 页面 一 o 


在 Dreamweaver CC“ 代 码 视图 ”中 可 
以 查看 或 编辑 源 代码 。 为 了 方便 手工 编写 代 ; 
码 ，Dreamweaver CC 增加 了 标签 选择 器 和 标 | 
签 编辑 器 。 使 用 标签 选择 器 ， 可 以 在 网 页 代 | 
码 中 插入 新 的 标签 ; 使 用 标签 编辑 器 ， 可 以 | 
对 网 页 代码 中 的 标签 进行 编辑 ， 添 加 标签 的 ; 


属性 或 修改 属性 值 。 在 Dreamweaver 中 编写 代 | i 设计 视图 
ni | 因 选择 “文件 ” |“ 保存” 命令， 保存 文档 , 
加 打开 Dreamweaver CC 软件 ， 新 建 空白 文 : 即 可 完成 HTMI 文 件 的 编写 。 


ri 
1. 人 HTML 页 面 主体 常用 设置 
在 <body> 和 </body> 中 放置 的 是 页 面 中 所 有 的 内 容 ， 如 图 片 、 文 字 、 


表格 、 表单 超 链接 等 设置 。<body> 标 记 有 自己 的 属性 ， 包 括 网 页 的 背景 设置 、 文 字 属 性 设置 
和 和 链接 设置 等 。 设 置 <body> 标 记 内 的 属性 ， 可 控制 整个 页 面 的 显示 方式 。 


中 1.4.1 课堂 小 实例 一 一 定义 网 页 背景 色 〈bgcolor) 
对 大 多 数 浏览 器 而 言 ， vi 白色 。 在 网 页 设计 中 ，bgcolor 属 性 标 
志 整 个 HTML 文档 的 背景 颜 
基本 语法 : 
<body bgcolor=" 背 景 颜色 "> 
语法 说 明 : 
背景 颜色 有 两 种 表示 方法 : 
太 ”使 用 颜色 名 指定 ， 例 如 红色 、 绿 色 等 分 别 用 red、green 等 表示 。 


课堂 实录 。e 一 @@ 
太 ”使 用 十 六 进 制 格式 数据 值 梳 RGGBB 来 表 | 叶 1.4.2 ”课堂 小 实例 一 一 设置 背 
示 ，RR、GG、BB 分 别 表示 颜色 中 的 红 、 景 图 片 (background) 


绿 、 蓝 三 基色 的 两 位 十 六 进 制 数据 。 四 本 _ 
实例 代码 : 网 页 的 背景 图 片 可 以 衬托 网 页 的 显示 效 


| 果 ， 从 而 取得 更 好 的 视觉 效果 。 背 景 图 片 的 
<!doctype html> i ge x i 

; 选择 不 仅 要 好 看 ， 而 且 还 要 注意 不 “ 喧 宾 夺 
<html> | i \ 子 总 3 
ee | 主 ”， 影 响 网 页 内 容 的 阅读 。 通 常 使 用 深 色 
<meta charset="utf-8"> ; 的 背景 图 片 配合 浅 色 的 文本 ， 或 者 是 浅 色 的 
<title> 定 义 背 景 颜色 </title> ; 背景 图 片 配合 深 色 的 文本 。background 属 性 用 
</head> ; 来 设置 HTML 网 页 的 背景 图 片 。 
<body bgcolor="#ff0000"> | 基本 语法 

日 /大 : 
</body> | 

<body background=" 图 片 的 地 址 "> 

</html> 


在 代码 中 加 粗 部 分 的 代码 标记 | ”语法 六 明 

“bgcolor="#ff0000"” 是 为 页 面 设置 背景 颜色 ， ; acheroune /Rs en 景 图 片 的 路 径 和 

在 浏览 句 中 预览 效果 ， 如 图 1-7 所 示 。 背 景 颜色 | 文件 名 。 图 片 的 地 址 可 以 是 相对 地 址 ， 也 可 
”以 是 绝对 地 址 。 在 默认 情况 下 ， 用 户 可 以 省 


在 网 页 上 非常 常见 ， 图 1-8 所 示 的 网 页 使 用 了 大 可 ee 
色 背 景 | 略 此 属性 ， 这 时 图 片 会 按照 水 平和 垂直 的 广 


面积 的 粉红 色 背 景 | ee es E 
| 向 不 断 重复 出 现 ， 直 到 铺 满 整个 页 面 。 
| 实例 代码 : 


<!doctype html> 


<html> 
<head> 
<meta charset="utf-8"> 


<title> 设 置 背 景 图 片 </title> 


</head> 
<body background="images/ abbg.jpg"> 
</body> 
</html> 
| 在 代码 中 加 粗 部 分 的 代码 标记 
图 1-7 设置 页 面 的 背景 颜色 | “background="images/ abbg.jpg" ”为 设置 的 


| 网 页 背景 图 片 ， 在 浏览 器 中 预览 可 以 看 到 背 
| 景 图 片 ， 如 图 1-9 所 示 。 在 网 络 上 除了 可 以 看 
| 到 各 种 背景 色 的 页 面 之 外 ， 还 可 以 看 到 一 些 
| 网 页 以 图 片 作 为 背景 。 图 1-10 所 示 的 网 页 就 使 


了 背景 图 片 。 
Pd 


4 EN 
提 示 2e mm am am am em am sme ea 明 


LE I 
| | 。 网 页 中 可 以 使 用 图 片 作 背 景 ， 但 图 片 一 定 要 上 
| 上 1 与 插图 及 文字 的 颜色 相 协 调 ， 才 能 达到 美观 的 效 | 
| 目 采 ， 如 果 色 差 太 大 ， 会 使 网 页 失去 美感 。 I 
图 1-8 使 用 粉红 色 背 景 的 网 页 | 上 为 保证 浏览 器 载 入 网 页 的 速度 ， 建 议 尽 量 不 上 

| 重要 使 用 字 节 过 大 的 图 片 作为 背景 图 片 。 I 


WEDDING 
SHOP 


图 1-9 页 面 的 青 景 图 片 图 1-10 使 用 了 背景 图 片 


月 1.4.3 ”课堂 小 实例 一 一 设置 文字 颜色 (text) 一 一 一 一 一 一 
通过 text 可 以 设置 body 体 内 所 有 文本 的 颜色 。 在 没有 对 文字 的 颜色 进行 单独 定义 时 ， 这 一 
属性 可 以 对 页 面 中 所 有 的 文字 起 作用 。 
基本 语法 : 


语法 说 明 : 
在 该 语法 中 ，text 的 属性 值 与 设置 页 面 背 景色 的 属性 值 相同 。 
实例 代码 : 


在 代码 中 加 粗 部 分 的 代码 标记 “text="#C36000"” 为 设置 的 文字 颜色 ， 在 浏览 器 中 预览 可 
以 看 到 文档 中 文字 的 颜色 ， 如 图 1-11 所 示 。 

在 网 页 中 需要 根据 网 页 整体 色彩 的 搭配 来 设置 文字 的 颜色 。 图 1-12 所 示 的 文字 和 整个 网 页 
的 颜色 相 协调 。 
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图 1-11 设置 文字 的 颜色 


图 1-12 文字 的 颜色 


侦 1.4.4 ”课堂 小 实例 一 一 设置 链接 文字 属性 一 一 一 一 一 一 一 一 0 


为 了 突出 超 链 接 ， 超 链接 文字 通常 采用 
与 其 他 文字 不 同 


颜色 。 
基本 语法 : 


语法 说 明 : | 
这 一 属性 的 设置 与 前 面 几 个 设置 颜色 的 参 | 

数 类 似 ， 都 是 与 body 标 签 放置 在 一 起 ， 表 明 它 

对 网 页 中 所 有 未 单独 设置 的 元 素 起 作用 。 

实例 代码 : 


“link="#993300"” 是 为 链接 文字 设置 颜色 ， 


的 颜色 ， 超 链接 文字 的 下 端 | 
还 会 加 一 个 横 线 。 网 页 的 超 链接 文字 有 默认 ; 
的 颜色 ， 在 默认 情况 下 ， 浏 览 器 以 蓝 色 作为 ; 
超 链接 文字 的 颜色 ， 访 问 过 的 文字 则 颜色 变 ， 
为 瞳 红色 。 在 <body> 标 记 中 也 可 自 定义 这 些 | 


在 代码 中 加 粗 部 分 的 代码 标记 | 


| 在 浏览 器 中 预览 效果 ， 可 以 看 到 链接 的 文字 
已 经 不 是 默认 的 蓝 色 ， 如 图 1-13 所 示 。 
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图 1-13 设置 链接 文字 的 着 色 
| 使 用 alink 可 以 设置 鼠标 点 击 超 链接 时 的 
| 颜色 ， 举 例如 下 。 


在 代码 中 加 粗 部 分 的 代码 标记 


@ 一 第 1 课 IFN 和 
“alinkr"#0066FF"” 是 为 单 击 链接 的 文字 时 设置 颜色 ， 在 浏览 器 中 预览 效果 ， 可 以 看 到 单 击 链 
接 的 文字 时 ， 文 字 已 经 改变 了 颜色 ， 如 图 1-14 所 示 。 
使 用 vlink 可 以 设置 已 访问 过 的 超 链 接 颜色 ， 举 例如 下 。 


在 代码 中 加 粗 部 分 的 代码 标记 “vlink="#EF0000"” 是 为 链接 的 文字 设置 访问 后 的 颜色 ， 在 
浏览 器 中 预览 效果 ， 可 以 看 到 单 击 链接 后 文字 


图 1-14 单 击 链 接 文 字 时 的 颜色 
在 网 页 中 ， 一 般 文字 上 
可 以 自己 设置 成 其 他 颜色 ) ， 时 


文字 下 面 有 一 条 下 划 线 。 当 移 > As > 
动 鼠 标 指针 到 该 超 链接 上 时 ， 2 


鼠标 指针 就 会 变 成 一 只 手 的 形 
状 ， 这 时 候 用 鼠标 左 键 单 击 ， 
就 可 以 直接 跳 到 与 这 个 超 链接 i et 


相连 接 的 网 页 。 如 果 已 经 浏览 et 
过 某 个 超 链接 ， 这 个 超 链接 的 全 ee rere ee 
文本 颜色 就 会 发 生 改变 。 i 

1-16 所 示 为 网 页 中 的 超 链接 广 

字 颜 色 。 


图 1-16 网 页 中 的 超 链接 文字 颜色 
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侦 1.4.5 课堂 小 实例 一 设置 页 面 边 距 一 一 一 一 一 一 一 一 一 0 

有 的 朋友 在 做 页 面 的 时 候 ， 感 觉 文字 或 者 表格 怎么 也 不 能 靠 在 浏览 器 的 最 上 边 和 最 左边 ， 
这 是 怎么 回 事 呢 ? 因为 一 般 用 的 制作 软件 或 html 语 言 默认 的 都 是 topmargin、leftmargin 值 等 于 
12， 如 果 把 它们 的 值 设 为 0， 就 会 看 到 网 页 的 元 素 与 左边 距离 为 0 了 。 


基本 语法 : 


语法 说 明 : 


通过 设置 “topmargin/leftmargin/ ; 
rightmargin/bottomnargin” 不 同 的 属性 值 来 : 


在 代码 中 加 粗 部 分 的 代码 标记 
“topmargin="80"” 是 设置 上 边 距 ， 
“leftmargin="80"” 是 设置 左边 距 ， 在 浏览 器 


设置 显示 内 容 与 浏览 器 的 距离 : 在 默认 情况 : 中 预览 效果 ， 可 以 看 出 定义 的 边 距 效果 ， 如 
下 ， 边 距 的 值 以 像素 为 单位 。 | 图 1-17 所 示 。 

太 topmaregin 设 置 到 顶端 的 距离 。 | EEEE 二 村 
六 leftmargin 设 置 到 左边 的 距离 。 Was 

六 ”rightmargin 设 置 到 右边 的 距离 。 Bj 

太 ”bottommargin 设 置 到 底 边 的 距离 。 se 


Now 


图 1-17 设置 的 边 距 效果 


页 面 头 部 元 素 <head> 和 <<IDOCTYPE> 


| @ 5 在 HTML 语 言 的 头 部 元 素 中 ， 一 般 需 要 包括 标题 、 基 础 信息 和 元 信息 
等 。HTML 的 头 部 元 素 以 <head> 为 开始 标记 ， 以 </head> 为 结束 标记 。 
基本 语法 : | 


语法 说 明 : | 

定义 在 HTML 语 言 头 部 的 内 容 都 不 会 在 网 ; 
页 上 直接 显示 ， 而 是 通过 另外 的 方式 起 作用 。 
实例 代码 : 


| HTML 也 有 多 个 不 同 的 版 本 ， 只 有 完全 
i 明白 页 面 中 使 用 的 确切 的 HTML 版 本 ， 浏 览 器 
| 才能 完全 正确 地 显示 出 HTML 页 面 。 这 就 是 
i <IDOCTYPE> 的 用 处 。 
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<ldoctype > 不 是 HTML 标 签 。 它 为 浏览 器 提供 一 项 信息 〈 声 明 ) ， 即 HTML 是 用 什么 版 本 
编写 的 。 

<tdoctype> 声 明 位 于 文档 中 的 最 前 面 的 位 置 ， 处 于 <html> 标 签 之 前 。 此 标签 可 告知 浏览 露 
文档 使 用 哪 种 HTML 或 XHTML 规范 。 


| 6 页 面 标题 元 素 <title> 
@ 


不 管 是 用 户 或 者 是 搜索 引擎 ， 对 一 个 网 站 最 直观 的 印象 往往 来 自 于 这 
个 网 站 的 标题 。 用 户 通过 搜索 自己 感 兴趣 的 关键 字 ， 来 到 搜索 结果 页 面 ， 决 定 他 是 否 点 击 关键 
字 往往 在 于 网 站 的 标题 。 在 网 页 中 设置 网 页 的 标题 ， 只 要 在 HTML 文 件 的 头 部 文件 的 <tide></ 
tle> 中 输入 标题 信息 ， 就 可 以 在 浏览 器 上 显示 。 标 题 标记 以 <title> 开 始 ， 以 <ftitle> 结 束 。 
基本 语法 : | 看 到 网 页 标题 ， 如 图 1-18 所 示 。 


语法 说 明 : | 
页 面 的 标题 只 有 一 个 ， 它 位 于 HTMIL 文 ; 
档 的 头 部 ， 即 <head> 和 </head> 之 间 。 | 
实例 代码 : 


图 1-18 页 面 标题 


| 了 解 了 网 站 标题 的 重要 性 之 后 ， 下 面 看 下 如 上 

: 上 生来 设置 网站 标题 。 首 先 应 该 明确 网 站 的 定位 ， 

,希望 对 嘱 类 鹿 感 兴趣 的 用 户 能 够 通过 搜索 引 党 术 上 
在 代码 中 加 粗 部 分 的 代码 标记 “<title> 万 | 上 a 自己 的 站 点 ， 在 经 过 关键 字 调 研 之 后 ， 选 择 几 

通 科 技 有 限 公 司 </title>” 设 置 网 页 的 标题 ， | 上 仆 能 带 来 不 菲 流量 的 关键 字 ， | 


在 浏览 器 中 预览 效果 ， 可 以 在 浏览 器 标题 栏 “上 的 关键 字 放 在 fille 的 最 前 面 。 


元 信息 元 素 <meta>> 


@ <meta> 标 记 的 功能 主要 是 定义 页 面 中 的 信息 ， 这 些 信息 并 不 会 显 
示 在 浏览 器 中 ， 而 只 在 源 代码 中 显示 。<meta> 标 记 通 过 属性 定义 文件 信息 的 名 称 、 内 容 等 。 
<meta> 标 记 能 够 提供 文档 的 关键 字 、 作 者 及 描述 等 多 种 信息 ， 在 HIML 头 部 可 以 包括 任意 数量 
的 <meta> 标 记 。 
name 属 性 用 于 描述 网 页 ， 它 是 以 名 称 / 值 形 式 的 名 称 ，name 属 性 的 值 所 描述 的 内 容 〈 值 ) 通 
过 content 属 性 表示 ， 便 于 搜索 引擎 查找 分 类 。 其 中 最 重要 的 是 description，keywords 和 robots。 
http-equiv 属 性 用 于 提供 HITP 协 议 的 响应 MIME 文 档 头 ， 它 是 以 名 称 / 值 形式 的 名 称 ，http- 
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equiv 属 性 的 值 所 描述 的 内 容 〈 值 ) 通过 content 属 性 表示 ， 通 常 为 网 页 加 载 前 提供 给 浏览 器 等 设 
备 使 用 。 其 中 最 重要 的 是 content-type charset 提 供 编码 信息 ，refresh 刷 新 与 跳 转 页 面 ，no-cache 
页 面 缓存 。 
仆 1.7.1 课堂 小 实例 一 一 设置 页 面 描述 一 一 一 一 一 一 一 一 一 0 

描述 标签 是 description， 网 页 的 描述 标签 为 搜索 引擎 提供 了 关于 这 个 网 页 的 总 括 性 描述 。 
网 页 的 描述 元 标签 是 由 一 两 个 语句 或 段落 组 成 的 ， 内 容 一 定 要 有 相关 性 ， 描 述 不 能 太 短 、 太 长 
或 过 分 重复 。 

基本 语法 : 

语法 说 明 : 

在 该 语法 中 ，description 用 于 定义 网 页 简短 描述 。description 出 现在 name 属 性 中 ， 使 用 
content 属 性 提供 网 页 的 简短 描述 。 网 页 简短 描述 不 能 太 长 ， 应 该 保持 在 140 一 200 个 字符 或 者 
100 个 左右 的 汉字 即 可 。 


实例 代码 : 


上 1.7.2 课堂 小 实例 一 一 定义 页 面 的 搜索 方式 
可 以 通过 meta 中 的 robots 定 义 网 页 搜索 引擎 索引 方式 。 
基本 语法 : | 
语法 说 明 : 
robots 出 现在 name 属 性 中 ， 使 用 content 属 性 定义 网 页 搜索 引擎 索引 方式 。 搜 索 方式 的 取 什 
见 表 1-1。 
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表 1-1 汪 的 到 人 


pr 性 值 : 
rrryroyyrrrrr | 
index 表示 能 搜索 当前 网 页 
生生 搜索 引擎 继续 通过 此 网 页 的 链接 搜索 
其 他 的 网 页 
i 搜索 引擎 不 继续 通过 此 网 页 的 链接 搜 
索 其 他 的 网 页 
noindex | 表示 不 能 搜索 当前 网 页 | 
none 搜索 引擎 将 忽略 此 网 页 | 在 代码 中 加 粗 的 “<meta name="robots" 
实例 代码 : i content="index">” 标 记 将 网 页 的 搜索 方式 设 
| 置 为 能 搜索 当前 网 页 。 


咀 1.7.3 ”课堂 小 实例 一 一 定义 页 面 的 跳 转 一 一 一 一 一 一 一 一 一 0 
在 浏览 网 页 时 经 常会 看 到 一 些 欢迎 信息 的 页 面 ， 在 经 过 一 段 时 间 后 ， 这 些 页 面 会 自动 转 

到 其 他 页 面 ， 这 就 是 网 页 的 跳 转 。 用 http-equiv 属 性 中 的 refresh 不 仅 能 够 完成 页 面 自身 的 自动 刷 

新 ， 也 可 以 实现 页 面 之 间 的 跳 转 过 程 。 通 过 设置 meta 对 象 的 http-equiv 属 性 来 实现 跳 转 页 面 。 
基本 语法 : 

rete Petpreqniv- rrefresh" contone~MAANI 0 Mi 
语法 说 明 : | EGR 
在 该 语法 中 ，refresh 出 现在 http-equiv 属 : ss | 

性 中 ，refresh 表 示 网 页 的 刷新 ， 而 在 content 中 : | 

设置 刷新 的 时 间 和 刷新 后 的 链接 地 址 ， 时 间 | | 

和 链接 地 址 之 间 用 分 号 相隔 。 默 认 情况 下 ， | 

跳 转 时 间 以 秒 为 单位 。 

实例 代码 : 


在 代码 中 加 粗 部 分 的 标记 是 设置 的 网 页 | 
的 定时 跳 转 ， 这 里 设置 为 10 秒 后 跳 转 到 index1. |; 
htm] 页 面 。 在 浏览 器 中 预览 可 以 看 出 ， 跳 转 前 ;| 
如 图 1-19 所 示 ， 跳 转 后 如 图 1-20 所 示 。 : 图 1-20 跳 转 后 
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性 1.7.4 课堂 小 实例 一 设置 页 面 关键 字 
关键 词 是 描述 


搜索 网 站 时 ， 如 果 
基本 语法 : 


网 页 


<meta name="keywords"content=" 输 入 具体 的 关 


键 词 "> 
语法 说 明 : 
在 该 语法 中 ，“name="keywords"” 用 于 
定义 网 页 关键 词 ， 也 就 是 设置 网 页 的 关键 词 属 上坟 


性 ， 而 在 content 中 ， 则 定义 具体 的 关键 词 。 
实例 代码 : 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<meta name="keywords" 
content="HTML+CSS 网 页 制作 与 布局 课堂 实录 "> 
<title> 插 入 关键 字 </title> 

</head> 

<body> 


1.8. 


创建 最 基 a 
回 使 用 Dreamweaver CC 打开 
加 WE 


DW sm wen 


网 页 文档 ， 如 


图 


Ea WA WM moo) (0 Sad SW eh 本 加 


DEES 
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网 站 的 产品 及 服务 的 词语 ， 选 择 适当 的 关键 词 是 建立 一 个 高 排名 网 站 的 第 一 
步 。 选 择 关 键 词 的 一 个 重要 的 技巧 是 选取 那些 常 为 人 们 在 搜索 时 所 用 到 的 关键 词 。 当 
中 包含 该 关键 词 ， 就 可 以 在 搜索 结果 中 列 
</body> 
</html> 


关键 词 


出 来 。 


在 代码 中 加 粗 的 代码 标记 为 插入 关键 字 。 


CR 


要 选择 与 网 站 或 页 面 主题 相关 的 文字 ， 不 要 


给 网 页 定义 与 网 页 描述 内 容 无 关 的 关键 词 。 
选择 具体 的 词语 ， 别 寄 望 于 行业 或 特 统 的 
词语 。 1 
可 以 为 网 页 提供 多 个 关键 词 ， 多 个 关 鱼 应 | 
该 使 用 空格 分 开 。 

ee te 
个 以 下 ， 过 多 的 关键 词 ， 搜 索引 学 将 忽略 。 
撕 摩 用户 会 用 什么 作为 搜索 词 ， 把 这 些 词 放 
在 页 面 上 或 直接 作为 关键 字 。 1 
关键 词 可 以 不 止 一 个 ， 最 好 根据 不 同 的 页 上 
面 ， 制 定 不 同 的 关键 词组 合 ， 这 样 页 面 被 搜 有 
索 到 的 概率 将 大 大 增加 。 1 


图 1-21 所 示 。 


， 下 “<title> 海 鲜 饺 子 城 </title>” 一 同 如 


mm 全 六 下 一 


合 实战 一 -创建 基本 的 HTML 文 件 。 


本 课 主要 学 习 了 HTML 文 件 整体 标记 的 使 用 ， 下 面 


所 学 的 知识 来 


和 外 1- 


1 


图 1-21 打开 原始 文档 


图 1-22 设置 网 页 的 标题 


园 打开 拆 分 视图 ， 在 <head> 和 </head> 之 间 输 入 如 下 代码 ， 来 定义 网 页 的 语言 :“<meta 
content="text/html; charset=gb2312" http-equiv=Content-Type>”， 如 图 1-23 所 示 。 
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园 打开 拆 分 视图 ， 在 <body> 标 签 中 输入 “text="#5BIE1D"”， 用 来 定义 文字 的 颜色 ， 如 图 1-24 所 示 。 


DW mH nen Eon MAD im) M0) 250 SA SW we =- ho-°l*)| [Dw x soa so KN Fam wo eo Was SPW wei mw. 团 DLIeLz 
EE E EE | 
| 国 debe Exchenge 
Cra 
= 
二 
一 一 一 一 一 
图 1-23 定义 网 页 的 语言 图 1-24 定义 文字 的 颜色 
园 保存 网 页 ， 在 浏览 器 中 预览 ， 如 图 1-25 所 示 。 
图 1-25 效果 图 
| 9 课 后 练习 0 
® 
一 、 填 空 题 
(1) 一 个 HIML 文 档 总 是 以 开始 的 ， 以 结束 。 之 间 包 
括 文档 的 头 部 信息 ， 如 文档 标题 等 ， 若 不 需 头 部 信息 则 可 省 略 此 标签 。 标签 一 般 不 


能 省 略 ， 表 示 正 文 内 容 的 开始 。 
(2) 由 于 HIML 语 言 编写 的 文件 是 标准 的 ASCII 文 本 文件 ， 因 此 可 以 使 用 任意 一 个 


文本 编辑 器 来 打开 并 编写 HTML 文 件 ， 例 如 Windows 系 统 中 自 带 的 _ _。 如 果 使 用 
$ 等 软件 ， 则 能 以 可 视 化 的 方式 进行 网 页 的 编辑 制作 等 。 


课堂 实 录 。 。e-@@ 
二 、 操 作 题 
(1) 用 下 浏览 器 打开 网 上 的 任意 一 个 网 页 ， 选 择 “ 查 看 ”|“ 源 文件 ”命令 ， 在 打开 的 记 
事 本 中 查看 各 代码 ， 并 试 着 与 浏览 器 中 的 内 容 进行 对 照 。 
(2) 分 别 利用 记事 本 和 Dreamweaver 创 建 一 个 简单 的 HTML 网 页 。 
(3) 简 述 网 页 设计 与 开发 的 一 般 步 骤 。 


] ] 


HTML 是 目前 网 络 上 应 用 最 为 广泛 的 语言 ， 也 是 构成 网 页 文 
A 本 课 介 绍 了 HTML 的 基本 概念 、 编 写 方法 和 HTML 页 面 基本 标签 ， 以 及 网 页 设 
计 与 开发 的 基本 流程 。 通 过 本 课 的 学 习 ， 使 读者 对 HTML 有 个 初步 的 了 解 ， 从 而 为 后 面 设计 制 
作 更 复杂 的 网 页 打下 良好 的 基础 。 


第 2 课 
用 HTML 设 置 文字 与 段落 格式 


本 课 导读 

文字 不 仅 是 网 页 信息 传达 的 一 种 常用 方式 ， 也 是 视觉 传 
达 最 直接 的 方式 ， 运 用 经 过 精心 处 理 的 文字 材料 完全 可 以 制作 
出 效果 很 好 的 版 面 。 用 户 输入 完 文本 内 容 后， 就 可 以 对 其 进行 
格式 化 操作 ， 而 设置 文本 样式 是 实现 快速 编辑 文档 的 有 效 操 
作 ， 让 文字 看 上 去 编排 有 序 、 整 齐 美观 。 通 过 对 本 课 的 学 习 ， 
读者 可 以 掌握 如 何在 网 页 中 合理 地 使 用 文字 ， 如 何 根据 需要 选 
择 不 同 的 文字 效果 。 


枝 术 要 点 
插入 其 他 标记 
设置 文字 的 格式 
设置 段落 的 排版 与 换行 
水 平 线 的 标记 - 【绿色 的 环保 的 ] 
设置 滚动 文字 本 


Ey 


设置 页 面 及 文本 段落 的 效果 
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在 网 页 中 除了 可 以 输入 汉字 、 英 文 和 其 他 语言 外 ， 还 可 以 输入 一 些 
空格 和 特殊 字符 ， 如 站、$、、# 等 。 


国 2.1.1 课堂 小 实例 一 一 输入 空格 符号 


可 以 用 许多 不 同 的 方法 来 分 开 文字 包 | 语法 说 明 : 
括 空 格 、 标 答 和 Enter。 这 些 都 被 称 为 空格 ， ; 在 网 页 中 可 以 有 多 个 空格 ， 输 入 一 个 空 
因为 它们 可 增加 字 与 字 之 间 的 距离 。 : 格 使 用 “&nbsp:” 表 示 ， 输 入 多 少 个 空格 就 
基本 语法 : 添加 多 少 个 “&nbsp:” 
实例 代码 : 


在 代码 中 加 粗 部 分 的 标记 “&nbsp:” 为 设置 空格 代码 。 在 浏览 器 中 预览 ， 可 以 看 到 浏览 器 
完整 地 保留 了 输入 的 空格 代码 效果 ， 如 图 2-1 所 示 。 


人 员 和 中间 
设计 专卖 店 的 平面 | 加 多 天 人 


图 2-1 空格 效果 
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用 2.1.2 输入 特殊 符号 
除了 空格 以 外 ， 在 网 页 的 制作 过 程 中 ， | 表 2-1 特殊 符合 

还 有 一 些 特殊 的 符号 也 需要 使 用 代码 进行 | 特殊 符号 

代替 。 一 般 情况 下 ， 特 殊 符 号 的 代码 由 前 缀 ， “ 

“&”、 字 符 名 称 和 后 级 “:;:” 组 成 。 使 用 特 ， 


殊 符 号 可 以 将 键盘 上 没有 的 字符 输出 来 。 &lt; 
基本 语法 : 人 gt 
&times; 
语法 说 明 : Ce 


在 需要 添加 特殊 符号 的 地 方 添加 相应 的 | 
符号 代码 即 可 。 常 用 符号 及 其 对 应 代码 如 表 
2-1 所 示 。 : 


2) » 设置 文字 的 格式 


<font> 标 记 用 来 控制 字体 、 字 号 和 颜色 等 属性 ， 它 是 HTML 中 最 基 
本 的 标记 之 一 ， 掌 握 好 <font> 标 记 的 使 用 是 控制 网 页 文本 的 基础 。 它 可 以 用 来 定义 文字 的 字体 
(Face) 、 大 小 〈Size) 和 颜色 〈Color) ， 也 就 是 它 的 3 个 参数 。 


上 用 2.2.1 课堂 小 实例 一 一 设置 字体 face) 
Face 属 性 规定 的 是 字体 的 名 称 ， 如 中 文字 体 的 “宋体 ”、“ 楷 体 ”、“ 素 书 ”等 。 可 以 通 
过 字体 的 face 属 性 设置 不 同 的 字体 ， 设 置 的 字体 效果 必须 在 浏览 器 中 安装 相应 的 字体 后 才 可 以 
正确 浏览 ， 否 则 有 些 特殊 字体 会 被 浏览 器 中 的 普通 字体 所 代替 。 
基本 语法 : 


语法 说 明 : 
face 属 性 用 于 定义 该 段 文本 所 采用 的 字体 名 称 。 如 果 浏 览 器 能 够 在 当前 系统 中 找到 该 字 
体 ， 则 使 用 该 字体 显示 。 


El®|@ lwm|lx|vI^|® 


&trade; 


实例 代码 : 
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在 代码 中 加 粗 部 分 的 代码 标记 是 设置 文字 的 字体 ， 在 浏览 器 中 预览 ， 可 以 看 到 不 同 的 字体 
效果 ， 如 图 2-2 所 示 。 


pei ,请 你 根据 货 软 汇 至 我 公司 冉 户 ， 以 便 我 公司 梁 单 人 员 备 货 ， 保 汪 专 实 店 货品 一 次 性 到 


委 修 充 工 前 两 天 。 请 你 笃 也 我 公司 业务 人 届 或 疫 公 司 相关 人 届 ， 以 便 基 前往 现场 核果 情 殉 ， 如 限 刍 接 加 纸 委 
这 分 格 ， 效 公司 全 立即 大多 。 


| 
[| 
贫 到 你 处 请 按照 狼 公 司 的 平 盏 设计 加 至 场 ， 布 置 饰 品 和 进行 导购 员 培训 ， 并 第 刘 柜 关 市 场 开拓 方案 | 


图 2-2 字体 属性 


侦 2.2.2 课堂 小 实例 一 一 设置 字号 (size) 一 一 一 一 一 一 一 
文字 的 大 小 也 是 字体 的 重要 属性 之 一 。 除 了 使 用 标题 文字 标记 设置 固定 大 小 的 字号 之 外 ， 
HTML 语 言 还 提供 了 <fonf> 标 记 的 size 属 性 来 设置 普通 文字 的 字号 。 
基本 语法 : 


语法 说 明 : 

size 属 性 用 来 设置 字体 大 小 ， 它 有 绝对 和 相对 两 种 方式 。Size 属 性 有 1 到 7 个 等 级 ，1 级 最 
小 ，7 级 的 字体 最 大 ， 上 默认 的 字体 大 小 是 3 号 字 。 可 以 使 用 “Size=?” 定 义 字体 的 大 小 。 

实例 代码 : 


在 代码 中 加 粗 部 分 的 标记 是 设置 文字 的 字号 ， 在 浏览 器 中 预览 效果 ， 如 图 2-3 所 示 。 
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区 各 专卖 店 的 同时 ， 请 你 概 据 和 款 本 至 半 公 司 联 户 ， 以 神秘 公 司 漆 单 人 抽 备 党 ， 你 证 专卖 店 从 名 一 次 性 到 位 。 | 


装修 完工 前 两 天 ， 请 你 化 电 我 公司 业务 人 员 或 我 公司 相关 人 员 ， 以 便 其 前 往 现 
场 核对 情况 ， 如 装修 按 图 纸 要 求 合 格 ， 我 公司 会 立即 发 货 。 


货 到 你 处 请 按照 我 公司 的 平面 设计 图 摆 
场 ， 布 置 饰品 和 进行 导购 员 塔 训 ， 并 策 
划 相 关 市 场 开 拓 方 案 。 


ET 


ne 图 2-3 设置 文字 的 字号 
0 


虽 2.2.3 ”设置 文字 颜色 〈colon) 一 一 一 一 一 一 一 一 一 一 一 0 


在 HTML 页 面 中 ， 还 可 以 通过 不 同 的 颜色 表现 不 同 的 文字 效果 ， 从 而 增加 网 页 的 亮丽 色 
彩 ， 吸 引 浏览 者 的 注意 。 

基本 语法 : 
ote/ion> 

语法 说 明 ; 

它 可 以 用 浏览 器 承认 的 颜色 名 称 和 十 六 进 制 数值 表示 。 

实例 代码 ; 


在 代码 中 加 粗 部 分 的 标记 是 设置 字体 的 颜色 ， 在 浏览 器 中 预览 ， 可 以 看 出 字体 颜色 的 效 
果 ， 如 图 2-4 所 示 。 


ET 课堂 实录 
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图 2-4 设置 字体 颜色 效果 


中 2.2.4 ”设置 粗 体 、 和 斜体 、 下 划 线 (b、strong、em、u) 一 一 0 

<b> 和 和 <strong> 是 HTML 中 格式 化 粗 体 文本 的 最 基本 元 素 。 在 <b> 和 </b> 之 间 的 文字 或 在 
<strong> 和 </strong> 之 间 的 文字 ， 在 浏览 器 中 都 会 以 粗 体 字 体 显示 。 该 元 素 的 首尾 部 分 都 是 必 
需 的 ， 如 果 没 有 结尾 标记 ， 则 浏览 器 会 认为 从 <b> 开 始 的 所 有 文字 都 是 粗 体 。 


基本 语法 : 


语法 说 明 : 


在 该 语法 中 ， 粗 体 的 效果 可 以 通过 <b> 标 | 


记 来 实现 ， 还 可 以 通过 <strong> 标 记 来 实现 。 
段 文本 的 任何 部 分 。 


文本 的 最 基本 元 素 。 在 <> 和 </i> 之 间 的 文字 、 


显示 。 


实例 代码 : 


基本 语法 : 


语法 说 明 : 
斜体 的 效果 可 以 通过 <i> 标 记 、<em> 标 记 


| 和 <cite> 标 记 来 实现 。 一 般 在 一 篇 以 正体 显示 
<b> 和 <strong> 是 行内 元 素 ， 它 可 以 插入 到 一 ; 的 文字 中 用 斜体 文字 起 到 醒目 、 强 调 或 者 区 
| 别 的 作用 。 

<P>、<em> 和 <cite> 是 HIML 中 格式 化 斜体 | 


<u> 标 记 的 使 用 和 粗 体 及 斜体 标记 类 似 ， 


| 它 作用 于 需 加 下 划 线 的 文字 。 
在 <em> 和 </em> 之 间 的 交 宣 9 或 在 <cite> 和 </ | 


之 间 的 文字 ， 在 浏览 尖 中 帮会 以 匀 体 字体。 573 到 


基本 语法 : 


语法 说 明 : 
该 语法 与 粗 体 和 斜体 的 语法 基本 相同 。 


在 代码 中 加 粗 部 分 的 标记 <strong> 为 设置 文字 的 加 粗 、<em> 为 设置 斜体 、<u> 为 设置 下 划 
线 的 效果 ， 在 浏览 器 中 预览 效果 ， 如 图 2-5 所 示 。 


SE 
一 、 不 达成 功 砂 不 休 ; 
二 、 楷 扰 扬 至， 会 石 为 开 ; 


、 形 成 天 才 的 决定 因素 


图 2-5 文字 加 粗 、 斜 体 、 下 划 线 效果 


咱 2.2.5 设置 上 标 与 下 标 (SUp、sub) 一 一 一 一 一 一 一 一 一 0 
sup 上 标 文本 标签 、sub 下 标 文本 标签 都 是 Html 的 标准 标签 ， 尽 管 使 用 的 场合 比较 少 ， 但 是 
数学 等 式 、 科 学 符号 和 化 学 公式 经 常会 被 用 到 。 
基本 语法 : 


语法 说 明 : 

在 <sup> .…..</sup> 中 的 内 容 的 高 度 为 前 后 文本 流 定 义 的 高 度 一 半 显 示 ，sup 文 字 下 端 和 前 
面 文字 的 下 端 对 齐 ， 但 是 与 当前 文本 流 中 文字 的 字体 和 字号 都 是 一 样 的 。 

在 <sub> .…..</sub> 中 的 内 容 的 高 度 为 前 后 文本 流 定 义 的 高 度 一 半 显 示 ，sup 文 字 上 端 和 前 
面 文字 的 上 端 对 齐 ， 但 是 与 当前 文本 流 中 文字 的 字体 和 字号 都 是 一 样 的 。 

实例 代码 : 


在 代码 中 加 粗 部 分 的 标记 <sup> 为 设置 上 标 ，<sub> 为 设置 下 标 ， 在 浏览 器 中 预览 效果 ， 如 


图 2-6 所 示 。 
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图 2-6 ”上 标 标记 和 下 标 标 记 


国 2.2.6 多 种 标题 样式 的 使 用 nt 一 一 一 一 0 


HTML 文 档 中 包含 有 各 种 级 别 的 标题 ， 
各 种 级 别 的 标题 由 <h1> 到 <h6> 元 素来 定义 。 | 
其 中 ，<h1> 代 表 最 高 级 别 的 标题 ， 依 次 递 
减 ，<h6> 级 别 最 低 。 : 


基本 语法 : 


| 在 代码 中 加 粗 的 代码 标记 用 于 设置 6 种 
| 级 别 不 同 的 标题 ， 在 浏览 器 中 浏览 效果 ， 如 
| 图 2-7 所 示 。 


语法 说 明 ， 
在 该 语法 中 ，1 级 标题 使 用 最 大 的 字号 表 
示 ，6 级 标题 使 用 最 小 的 字号 表示 。 

实例 代码 : 


ao 。 | 


图 2-7 设置 标题 标记 


/ ) 3 设置 段落 的 排版 与 换行 
e 在 网 页 制作 的 过 程 中 ， 将 一 段 文字 分 成 相应 的 段落 ， 不 仅 可 以 增强 


@@-e， 第 2 课 ETIIRSERAEEERES 王 


网 页 的 美观 性 ， 而 且 使 网 页 层次 分 明 ， 让 浏览 者 感觉 不 到 拥挤 。 在 网 页 中 如 果 要 把 文字 有 条 理 
地 显示 出 来 ， 离 不 开 段 落 标记 的 使 用 。 在 HIML 中 可 以 通过 标记 实现 段落 的 效果 。 


川 2.3.1 给 文字 进行 分 段 〈p) 一 


HIML 标 签 中 最 常用 最 简单 的 标签 是 段落 标签 ， 也 就 是 <p></p>， 说 它 常 用 ， 是 因为 几乎 
所 有 的 文档 文件 都 会 用 到 这 个 标签 ， 说 它 简单 ， 从 外 形 上 就 可 以 看 出 来 ， 它 只 有 一 个 字母 。 虽 
说 是 简单 ， 却 也 非常 重要 ， 因 为 这 是 一 个 用 来 区 别 段落 用 的 。 

基本 语法 : 


> 
语法 说 明 ; 
段落 标记 可 以 没有 结束 标记 </p>， 而 每 一 个 新 的 段落 标记 开始 的 同时 也 意味 着 上 一 个 段落 
的 结束 。 
实例 代码 ; 


在 代码 中 加 粗 部 分 的 代码 标记 <p> 为 段落 标记 ，<p> 和 </p> 之 间 的 文本 是 一 个 段落 ， 效 果 如 
图 2-8 所 示 。 


TT ET 


酒店 拥有 不 同类 型 的 豪华 客房 229 间 。 每 个 房间 均 设置 宽带 网 络 接口 、 卫 星 电 视 接 收 系统 、 
液晶 电视 、 迷 你 酒吧 。 站 在 房间 宽大 的 落地 窗 前 远 虹 一 下 ， 放 松 一 下 心情 ， 再 加 上 酒店 为 你 
精心 配备 了 中 餐厅 、 咖 啡 厅 、 茶 馆 、 商 务 KTV 等 休闲 康乐 设施 ， 细 致 贴心 的 服务 ， 让 你 尽 享 
繁华 中 的 静 座 ， 懂 意 中 的 温 声 。 


图 2-8 段落 效果 


川 2.3.2 ”段落 的 对 齐 属 性 (align》 一 一 一 一 一 一 一 一 一 一 一 0 


默认 情况 下 ， 文 字 是 左 对 齐 的 。 而 在 网 页 制作 过 程 中 ， 常 常 需要 选择 其 他 的 对 齐 方式 。 关 
于 对 齐 方式 的 设置 要 使 用 align 参 数 进行 设置 。 
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基本 语法 : | 表 2-2 ”对 齐 方式 
| 属性 值 含义 
语法 说 明 : :eft 左 对 齐 
在 该 语法 中 ，align 属 性 需要 设置 在 标题 标 ; center 居中 对 齐 
记 的 后 面 ， 其 对 齐 方式 的 取 值 如 表 2-2 所 示 。 ;ight 右 对 齐 
实例 代码 : 
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“align="left"” 是 设置 段落 为 左 对 齐 ，“align="center"” 是 设置 段落 为 居中 对 齐 ， 
“align="right"” 是 设置 段落 为 右 对 齐 ， 在 浏览 器 中 预览 ， 效 果 如 图 2-9 所 示 。 


pn TY i 
DO 


| 
1、 我 们 在 梦 里 走 了 许多 路 醒 宁 后 发 现 自己 证 在 床上 。 | 

2、 杰 老 并 不 等 于 肪 由， 直 正 的 太 职 在 于 看 先 ， 
4、 我 这 一 生 就 内 有 两样 不 会， 那 就是 这 届 不 会 于 也 不 会 


村 100% 


图 2-9 段落 的 对 齐 效 果 


有 2.3.3 不 换行 标记 (nobr) 
在 网 页 中 如 果 某 一 行 的 文本 过 长 ， 浏 览 器 会 自动 对 这 段 文字 进行 换行 处 理 。 可 以 使 用 nobr 
标记 来 禁止 自动 换行 
基本 语法 : 
‘abnop> 
语法 说 明 : 
nobr 标 签 用 于 使 指定 文本 不 换行 。nobr 标 签 之 间 的 文本 不 会 自动 换行 。 
实例 代码 : 


@-e 第 / 课 上 EMD 


在 代码 中 加 粗 部 分 的 代码 标记 <nobr> 为 不 换行 标记 ， 在 浏览 器 中 预览 ， 可 以 看 到 <nobr> 和 
</nobr> 之 间 的 文字 不 换行 一 直 往 后 排 ， 如 图 2-10 所 示 。 


DD TH J — 
[zen wor SE Sax IRT wwm 
1 匠人 丰 要 时 相 了 许多 政 ， 酸 林 后 和 现 各 己 还 左 订 上 ，2、 交 考 并 不 先生 ， 丰 正 半 所 和 在 天 适 ，3、 折 这 一 生 叉 Rl 


图 2-10 不 换行 效果 


国 2.3.4 换行 标记 (br) 


在 HIML 文 本 显示 中 ， 默 认 是 将 一 行文 字 连 续 地 显示 出 来 ， 如 果 想 把 一 个 句子 后 面 的 内 容 
在 下 一 行 显示 就 会 用 到 换行 符 <br>。 换 行 符号 标签 是 个 单 标签 ， 也 叫 空 标签 ， 不 包含 任 和 内 
容 。 在 HTML 文 件 中 的 任何 位 置 只 要 使 用 了 <br> 标 签 ， 当 文件 显示 在 浏览 器 中 时 ， 该 标签 之 后 
的 内 容 将 在 下 一 行 显示 。 

基本 语法 : 


语法 说 明 : 
一 个 <br> 标 记 代表 一 个 换行 ， 连 续 的 多 个 标记 可 以 实现 多 次 换行 。 
实例 代码 : 
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在 代码 中 加 粗 部 分 的 代码 标记 <br> 为 设置 换行 标记 ， 在 浏览 器 中 预览 ， 可 以 看 到 换行 的 效 
果 ， 如 图 2-11 所 示 。 


nasem mens D0 


"如果 你 简单 ， 站 
简单 生活 才能 幸福 生活 ， 人 人; 宽容 大 度 ， 什 么 事情 都 不 能 想 繁杂 ， 心 灵 的 负荷 重 了 ， 就 会 怨天尤人 。 
ea 把 失忆 二 人 有 这) 人 中 技 委 ， 


图 2-11 换行 效果 


2) 4 水 平 线 标记 0 


水 平 线 对 于 制作 网 页 的 朋友 来 说 一 定 不 会 陌生 ， 它 在 网 页 的 版 式 设计 
中 是 非常 有 作用 的 ， 可 以 用 来 分 隔 文本 和 对 象 。 在 网 页 中 常常 看 到 一 些 水 平 线 将 段落 与 段落 之 
间隔 开 ， 这 些 水 平 线 可 以 通过 插入 图 片 实现 ， 也 可 以 更 简单 地 通过 标记 来 完成 。 
作 2.4.1 插入 水 平 线 hn 一 一 一 一 一 一 一 一 一 一 一 9 


水 平 线 标记 ， 用 于 在 页 面 中 插入 一 条 水 平 标尺 线 ， 使 页 面 看 起 来 整齐 明了 。 
基本 语法 : 


语法 说 明 : 
在 网 页 中 输入 一 个 <hr> 标 记 ， 就 添加 了 一 条 默认 样式 的 水 平 线 。 
实例 代码 : 


@@ 。” 第 2 课 EM 


在 代码 中 加 粗 部 分 的 标记 为 水 平 线 标记 ， 在 浏览 器 中 预览 ， 可 以 看 到 插入 的 水 平 线 效果 ， 
如 图 2-12 所 示 。 
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信息 属 布 中 ee a 人 
和 国电 气 工业 协会 电线 让 总 分 会 会 员 单 位。 


图 2-12 插入 水 平 线 效 果 


虽 2.4.2 ”设置 水 平 线 宽度 与 高 度 属性 (width、size) 一 一 一 一 0 
默认 情况 下 ， 水 平 线 的 宽度 为 100%， 可 以 使 用 width 手动 调整 水 平 线 的 宽度 。size 标 记 用 于 
改变 水 平 线 的 高 度 。 
基本 语法 : 


语法 说 明 : 

在 该 语法 中 ， 水 平 线 的 宽度 值 可 以 是 确定 的 像素 值 ， 也 可 以 是 窗口 的 百分比 。 水 平 线 的 高 
度 只 能 使 用 绝对 的 像素 来 定义 。 

实例 代码 : 


在 代码 中 加 粗 部 分 的 标记 为 设置 水 平 线 的 宽度 和 高 度 ， 在 浏览 器 中 预览 ， 可 以 看 到 将 宽度 
设置 为 600 像 素 ， 高 度 设置 为 2 像素 的 效果 ， 如 图 2-13 所 示 。 
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|| 让 汪汪- 生生 二 咸 热 的 工艺- 0 还 以 “质量 先行 , 匡 
官 竺 上， 科技 创新 ， 持 乱 才 展 村 反 群 ， 尺 车 豆 半 ”的 所 全 和 腿 务 。 全 业 荣获 中 国生 业 企业 信 
Be 同时 也 是 中 国 兵 工 宰 会、 阳 类 行业 协 
佐 和 中 国电 所 工业 协会 和 线 志 绕 分 二 全 ! 


图 2-13 设置 水 平 线 宽度 
目 2.4.3 ”设置 水 平 线 的 颜色 (color) 一 一 一 一 一 一 一 一 一 一 0 


在 网 页 设计 过 程 中 ， 如 果 随意 利用 默认 水 平 线 ， 常 常会 出 现 插入 的 水 平 线 与 整个 网 页 颜色 
不 协调 的 情况 。 设 置 不 同 颜色 的 水 平 线 可 以 为 网 页 增色 不 少 。 
基本 语法 : 
color 
语法 说 明 ; 
颜色 代码 是 十 六 进 制 的 数值 或 者 颜色 的 英文 名 称 。 
实例 代码 : 


在 代码 中 加 粗 部 分 的 标记 为 设置 水 平 线 Se | 
的 颜色 ， 在 浏览 器 中 预览 ， 可 以 看 到 水 平 线 和 
的 颜色 效果 ， 如 图 2-14 所 示 。 | 


ee 同时 也 屋 中 国 关 工 体会、 阴 烧 行业 条 
全 和 中 国电 < 十 会 电 芝 电 扩 分 会员 音 位， 


图 2-14 ”水平线 的 颜色 
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用 2.4.4 设置 水 平 线 的 对 齐 方式 (align) 一 一 一 一 一 一 一 ? 
水 平 线 在 默认 情况 下 是 居中 对 齐 的 ， 如 果 想 让 水 平 线 左 对 齐 或 右 对 齐 ， 就 需要 设置 对 齐 方式 。 
基本 语法 : 

o> 
语法 说 明 : 

在 该 语法 中 对 齐 方式 可 以 有 3 种 ， 包 括 center、left 和 right， 其 中 center 的 效果 与 默认 的 效果 
相同 。 
实例 代码 : 


在 代码 中 加 粗 部 分 的 标记 为 设置 水 平 线 。 央 
的 排列 方式 ， 在 浏览 器 中 预览 ， 可 以 看 到 水 。 | 半生 

平 线 不 同 排列 方式 的 效果 ， 如 图 2-15 所 示 。 cl 

多 年 以 来 公司 不 名 8 有 国内 先进 的 生产 类 备 、 充 兰 的 管理 、 成 熟 的 工艺 、 齐 全 情 宝 的 性 齐 议 备 ， 
ee 


同时 也 是 中 国 反 工 协会 、 随 燃 行 业 协 全 和 中 国电 气 工业 协会 电 纺 直 斤 分 会 会员 单位 ， 


EY 


图 2-15 设置 水 平 线 的 排列 方式 
虽 2.4.5 ”水 平 线 去 掉 阴影 (noshade) 一 一 一 一 一 一 一 一 一 一 0 
默认 的 水 平 线 是 空心 立体 的 效果 ， 可 以 将 其 设置 为 实心 并 且 不 带 阴影 的 水 平 线 。 
基本 语法 : 
Rosa 


语法 说 明 : 
noshade 是 布尔 值 的 属性 ， 它 没有 属性 值 ， 如 果 在 <hr> 元 素 中 写 上 了 这 个 属性 ， 则 浏览 器 不 
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会 显示 立体 形状 的 水 平 线 ， 反 之 则 无 须 设置 该 属性 ， 浏 览 器 默认 显示 一 条 立体 形状 带 有 阴影 的 
水 平 线 。 
实例 代码 : 


在 代码 中 加 粗 部 分 的 标记 为 设置 无 阴影 ” 司 字 慨 
的 水 平 线 ， 在 浏览 器 中 预先 ， 可 以 看 到 水 平 。 守 守 二 
线 没有 阴影 的 效果 ， 如 图 2-16 所 示 。 am 


各 年 以 末 公 司 不 仅 痢 有 国内 先进 的 生产 设备 后 到 的 工 工 ， 弄 主 转 帘 的 检 铀 设备 ， 证 以 
nl 
i 


pox eT 


图 2-16 设置 无 阴影 的 水 平 线 


\ 几 DR 二 m1 
' ) | 设置 深 动 文字 9 
滚动 字幕 的 使 用 使 得 整个 网 页 更 有 动感 ， 显 得 很 有 生气 。 现 在 的 网 
站 中 也 越 来 越 多 地 使 用 滚动 字幕 来 加 强 网 页 的 互动 性 。 用 JavaScript 编 程 可 以 实现 滚动 字幕 效 
果 ; 用 层 也 可 以 做 出 非常 漂亮 的 滚动 字幕 。 而 用 HTML 的 <marquee> 滚 动 字幕 标记 所 需 的 代码 
最 少 ， 确 实 能 够 以 较 少 的 下 载 时 间 换 来 较 好 的 效果 。 
肯 2.5.1 滚动 文字 标签 一 marquee 一 一 一 一 一 一 一 一 一 一 一 0 


使 用 marquee 标 签 可 以 将 文字 、 图 片 等 设置 为 动态 滚动 的 效果 。 
基本 语法 : 


语法 说 明 : 
只 要 在 标签 之 间 添 加 要 进行 滚动 的 文字 即 可 。 而 且 可 以 在 标签 之 间 设 置 这 些 文字 的 字体 、 
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在 代码 中 加 粗 的 <marquee> 与 </marquee> [AN 全 和 RE 

二 We . i 3 ft 
之 间 的 文字 滚动 出 现 ， 在 浏览 器 中 浏览 ER 一 

果 ， 如 图 2-17 所 示 。 po 家人。 设计 人员 5， 公司 已 上 了 系 纵 化 设计、 本 化 人 人 能 力 ， 二 下 人 各 上 开 愉 力 从 有 


图 2-17 设置 文字 滚动 


器 2.5.2” 深 动 方向 属性 一 一 direction 
默认 情况 下 ， 文 字 滚 动 的 方向 是 从 右 向 左 ， 可 以 通过 direction 标 记 来 设置 滚动 的 方向 。 
基本 语法 : 

marquee direction-" 注 动 方向 "> 流动 的 文字 </marauec> 
语法 说 明 : 

在 该 语法 中 ， 滚 动 方向 包括 up、down、left 和 right 4 个 取 值 ， 它 们 分 别 表示 向 上 、 向 下 、 向 

左 和 向 右 滚动 ， 其 中 向 左 滚 动 left 的 效果 与 默认 效果 相同 。 
实例 代码 : 


TIE 课堂 实录 “ee 一 他 


在 代码 中 加 粗 的 <marquee> 与 </marquee> 之 间 的 文字 滚动 出 现 ，“direction="up"” 将 文字 
的 滚动 方向 设置 为 向 上 ， 在 浏览 器 中 浏览 效果 ， 如 图 2-18 所 示 。 


| 申 Petecnnz252ipemmeehmlD -| ET 


a 人 公司 已 具备 了 系统 化 设计 、 次 决 化 洪 筑 的 能 力 ， 超前 
开发 到 要 县 开发 ， 再 到 产品 市 该 的 全 方位 服务 能 力 ， 公 司 
a ne 


外 馆 部 件 生产 天 李 。 
我 们 束 心 地 项 望 成 为 证 大 的 再 献 ， 在 企业 
各区 人 未 壮大 我 们 的 团队 ， 让 我 们 扒 起 手 奈 、 共 同居 


图 2-18 设置 滚动 方向 


肯 2.5.3 滚动 方式 属性 -behavior 一 一 一 一 一 一 一 一 一 一 一 oO 
除了 可 以 设置 滚动 方向 外 ， 还 可 以 通过 behavior 标 记 来 设置 滚动 方式 ， 如 循环 运动 等 
基本 语法 : 
<narquee behavior- "滚动 方式 "> 滚动 的 文字 cjmaraee> 
语法 说 明 : 
behavior 标 记 的 取 值 如 表 2-3 所 示 。 
表 2-3 ”behavior 标 记 的 属性 


循环 滚动 ， 默 认 效果 
只 滚动 一 次 就 停止 
来 回 交替 进行 滚动 
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在 代码 中 加 粗 的 <marquee> 与 </marquee> 之 间 的 文字 滚动 出 现 ，“behavior="scroll"” 将 文 
字 的 滚动 方式 设置 为 循环 滚动 ， 在 浏览 器 中 浏览 效果 ， 如 图 2-19 所 示 。 


I enc mem o- oSwasame | 


公司 现 有 职工 300 余 人 ， 设 计 开发 人 员 15 名 ， 公 司 已 具备 了 系统 化 设计 、 模 块 化 供 货 的 能 力 ， 超 前 

Pe 从 设计 到 验证 ， 从 工艺 开发 到 模具 开发 ， 再 到 产品 制造 的 全 方位 服务 能 力 ， 公 司 
建筑 面积 2.6 万 平方 米 ， 是 华北 地 区 最 大 的 汽车 内 外 饰 部 御 

主机 三 的 战 喀 供应 商 ， 共 同 为 我 国 的 汽车 工业 发 展 人 出 更 大 的 贡献 ， 在 企业 

种 我 们 希望 有 更 多 的 有 识 之 士 前 来 加 盟 ， 来 壮大 我 们 的 团队 ， 让 我 们 携 起 手 来 、 共 同 发 


图 2-19 设置 滚动 方式 
朋 2.5.4 ”滚动 速度 属性 -一 scrolamount 一 一 一 一 一 一 一 一 一 0 


scrollamount 标 记 用 于 设置 文字 滚动 的 快慢 。 
基本 语法 : 
<marquee scrollamount=" 滚 动 速度 "> 滚动 的 文字 </marauee> ， 
语法 说 明 : 
滚动 的 速度 实际 上 是 设置 滚动 文字 每 次 移动 的 长 度 ， 以 像素 为 单位 。 
实例 代码 : 


| 同 识 堂 实录 ~e—® 


EEC ET 


9 人 人， 公司 上 
在 代码 中 加 粗 的 万 区 王 广 米 建筑 面积 26 万 平方 米 ， 是 华北 地 区 最 大 的 汽车 内 外 饰 部 件 生产 基地 
<marquee> 与 </marquee> 的 战略 供应 商 ， 共 同 为 我 国 的 汽车 工业 发 展 做 出 更 大 的 贡献 ， 在 企 


的 有 识 之 士 前 来 加 盟 ， 来 壮大 我 们 的 团队 ， 让 我 们 奖 起 手 来 、 共 同 


之 间 的 文字 滚动 出 现 ， 

“scrollamount=-"1"” 将 文字 滚 

动 的 速度 设置 为 1， 在 浏览 如 
中 浏览 效果 ， 如 图 2-20 所 示 。 


图 2-20 设置 滚动 速度 
上 2.5.5 “滚动 延迟 属性 一 scroldelay 一 一 一 一 一 一 一 一 一 一 
scrolldelay 标 记 用 于 设置 滚动 文字 的 时 间 间 隔 。 
基本 语法 : 
语法 说 明 : 
scrolldelay 的 时 间 间 隔 单位 是 毫秒 ， 如 果 设 置 的 时 间 比 较 长 ， 会 产生 走 走 停 停 的 效果 。 
实例 代码 : 


在 代码 中 加 粗 的 


<marquee> 与 </marquee> 


mmcma2s Vanscaste tn -oimancame | 


1 开发 和 同人 et 
之 间 的 文字 滚动 出 现 ， 占 地 3 万 多 平方 米 ， 建 筑 奋 积 26 万 平方 米 ”是 华北 地 区 最 大 的 汽车 内 外 泌 部 件 生产 基地 。 
“scrolldelay="60"” 将 文字 我 们 束 心 地 希望 成 为 各 主机 厂 的 战略 供应 商 ， 共 同 为 我 国 的 汽车 工业 发 展 做 出 更 大 的 贡献 


,在 企业 
区 我 们 秆 望 有 更 多 的 有 识 之 士 前 来 加 盟 ， 来 灶 大 我 们 的 团队 ， 让 我 们 的 起 手 来、 共同 发 


的 滚动 延迟 设置 为 60， 在 浏 局 
览 器 中 浏览 效果 ， 如 图 2-21 
所 示 。 


图 2-21 设置 滚动 延迟 
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明 2.5.6 “滚动 循环 属性 loop 一 一 一 一。o 
设置 文字 滚动 后 ， 默 认 情 况 下 会 不 断 地 循环 下 去 ， 如 果 希 望 滚动 几 次 就 停止 ， 可 以 使 用 
loop 标 记 设 置 滚动 的 次 数 。 
基本 语法 : 


实例 代码 : 


在 代码 中 加 粗 的 <marquee> 与 </marquee> 之 间 的 文字 滚动 出 现 ，“loop-"3"” 将 文字 滚动 的 
循环 次 数 设置 为 3， 在 浏览 器 中 浏览 效果 ， 如 图 2-22 所 示 。 
当 文 字 滚动 3 个 循环 之 后 ， 滚 动 文 字 将 不 再 出 现 ， 如 图 2-23 所 示 。 


300 余 ， 1 省 ， A 设计 、 模 块 化 殿 贷 的 陛 力 ， 超 的 
人 A 产品 济 | 洁 的 全 方位 职务 能 力 。 公 司 
占 地 3 万 ; 9 于 六 面积 ?6 万 平方 米 -| ee 


训 丰 为 各 主机 三 的 避 8 供应 百 ， 共 同 为 我 国 的 汽车 工业 发 展 演出 更 大 的 于 歌 ， 在 企业 稻 蔚 发展 的 同时 ,， 
我 们 需 望 有 更 条 的 有 识 之 士 前 来 加 盟 ， 床 壮大 我 们 的 团队 ， 让 我 们 的 起 手 来 、 共 同 发 展 、 共 冲 攀 糙 ， 


图 2-22 设置 循环 次 数 图 2-23 ”滚动 文字 不 再 出 现 


轩 2.5.7 ”滚动 范围 属性 一 width、 height 一 一 0o 
如 果 不 设置 滚动 背景 的 面积 ， 黑 认 情 况 下 ， 水 平 滚动 的 文字 背景 与 文字 同 高 、 与 浏览 器 窗 
口 同 宽 ， 使 用 width 和 height 标 记 可 以 调整 其 水 平和 垂直 的 范围 。 
基本 语法 : 
“<narquee Width=" 青 景 窑 度 ”height =-" 青 早 高度"> 液 动 的 文字 </mardauee> 
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语法 说 明 : 
以 像素 为 单位 设置 滚动 背景 宽度 和 高 度 。 
实例 代码 : 


在 代码 中 加 粗 的 <marquee> 与 </marquee> 之 间 的 文字 滚动 出 现 ，“width="450" 
height="280"” 将 文字 的 滚动 宽度 和 高 度 分 别 设置 为 4530 和 280， 在 浏览 器 中 浏览 效果 ， 如 图 
2-24 所 示 。 


Oe wos newsmen -cenmaae ec] 


公司 现 有 职工 300 余 人 ， 设 计 开发 人 员 15 名 ， 公 司 已 具备 了 系统 
化 设计 、 模 块 化 供 货 的 能 力 ， 超 前 开发 和 同步 开发 能 力 ， 从 设计 
到 验证 ， 从 工艺 开发 到 模具 开发 ， 再 到 产品 制造 的 全 方位 服务 能 

米 ， 建 筑 面积 2.6 万 平方 米 ， 是 华北 地 区 


图 2-24 设置 滚动 宽度 和 高 度 


肯 2.5.8 滚动 背景 颜色 属性 一 bgcolor 一 一 一 一 一 一 一 一 一 一 0 


bgcolor 标 记 用 于 设置 滚动 区 域 的 背景 颜色 ， 以 突出 显示 某 部 分 。 
基本 语法 : 


marquee bgcolor- "月 虹 关 多"> 汉 的 文字 </marquee> 
语法 说 明 ， 
滚动 背景 颜色 可 以 是 一 个 已 命名 的 颜色 ， 也 可 以 是 一 个 十 六 进 制 的 颜色 值 。 
实例 代码 ; 


38 


@ _。” 第 2 课 上 ET 再 


<meta charset="utf-8"> 

<head> 

<tit1le> 滚 动 背景 颜色 属性 </title> 

</head> 

<body> 

<marquee direction="up" scrollamount="1" width="450" height="280"™ 

bgcolor="#F3F000"> 

<p> 公 司 现 有 职工 300 余 人 ， 设 计 开 发 人 员 15 名 ， 公 司 已 具备 了 系统 化 设计 、 模 块 化 供 货 的 能 力 ， 超 前 开发 和 同步 开发 能 
力 ; 从 设计 到 验证 ， 从 工艺 开发 到 模具 开发 ， 再 到 产品 制造 的 全 方位 服务 能 力 ， 公 司 占 地 3 万 多 平方 米 ， 建 筑 面积 2 . 6 万 平 
方 米 ， 是 华北 地 区 最 大 的 汽车 内 外 饰 部 件 生产 基地 。 我 们 囊 心 地 希望 成 为 各 主机 厂 的 战略 供应 商 ， 共 同 为 我 国 的 汽车 工业 
发 展 做 出 更 大 的 贡献 ， 在 企业 稳步 发 展 的 同时 ， 我 们 希望 有 更 多 的 有 识 之 士 前 来 加 盟 ， 来 壮大 我 们 的 团队 ， 让 我 们 携 起 手 
来 、 共 同 发 展 、 共 创 辉煌 。 </p> 


</marquee> 


</body> 
</html> 
在 代码 中 加 粗 的 <marquee> 与 </marquee> 之 间 的 文字 滚动 出 现 ，“bgcolor='"#F99000"” 将 
文字 滚动 区 域 的 背景 颜色 设置 为 黄色 ， 在 浏览 器 中 浏览 效果 ， 如 图 2-25 所 示 。 
- = 医 梧 


国 -Hozvz.5.8N 和 动 背 要 下 色 尾 性 html 


图 2-25 设置 滚动 区 域 的 背景 颜色 


2.5.9 ”滚动 空间 属性 一 一 hspace、vspace 
hspace 和 vspac 标 记 用 于 设置 滚动 文字 周围 的 文字 与 滚动 背景 之 间 的 空白 空间 。 
基本 语法 : 

<marquee hspace=" 水 平 范 围 ” vspace=" 垂 直 范 围 "> 滚动 的 文字 </marquee> 


语法 说 明 : 
以 像素 为 单位 设置 水 平 范围 和 垂直 范围 。 
实例 代码 : 


<!doctype html> 
<html> 

<meta charset="utf-8"> 
<head> 
<title> 滚 动 空间 属性 </title> 
</head> 

<body> 
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<marquee direction="up" scrollamount="]1" width="450" height="280" 
bgcolor="#F3F000" hspace="40" vspace="20"> 
<p> 公 司 现 有 职工 300 余 人 ， 设 计 开 发 人 员 15 名 ， 公 司 已 具备 了 系统 化 设计 、 模 块 化 供 货 的 能 力 ; 超前 开发 和 同步 开发 能 
力 ; 从 设计 到 验证 ， 从 工艺 开发 到 模具 开发 ， 再 到 产品 制造 的 全 方位 服务 能 力 ， 公 司 占 地 3 万 多 平方 米 ， 建 筑 面积 2 . 6 万 平 
方 米 ， 是 华北 地 区 最 大 的 汽车 内 外 饰 部 件 生产 基地 。 我 们 吏 心地 希望 成 为 各 主机 厂 的 战略 供应 商 ， 共 同 为 我 国 的 汽车 工业 
发 展 做 出 更 大 的 贡献 ， 在 企业 稳步 发 展 的 同时 ， 我 们 希望 有 更 多 的 有 识 之 士 前 来 加 盟 ， 来 壮大 我 们 的 团队 ， 让 我 们 携 起 手 
来 、 共 同 发 展 、 共 创 辉煌 。</p> 
</marquee> 
</body> 
</html> 

在 代码 中 加 粗 的 <marquee> 与 </marquee> 之 间 的 文字 滚动 出 现 ，“hspace="40" vspace="20"” 
将 文字 的 水 平 范 围 和 垂直 范围 分 别 设置 为 0 和 20， 在 浏览 器 中 浏览 效果 ， 如 图 2-26 所 示 。 


二- 


Ea] Hens -cs sw=ass ] 


图 2-26 设置 空白 空间 


0 O 综合 实例 一 一 设置 页 面 文本 及 段落 * 
©® 


文字 是 人 类 语言 最 基本 的 表达 方式 ， 文 本 的 控制 与 布局 在 网 页 设计 中 
占 了 很 大 比例 ， 文 本 与 段落 也 可 以 说 是 最 重要 的 组 成 部 分 。 本 章 通 过 大 量 实例 详细 讲述 了 文本 
与 段落 标记 的 使 用 ， 下 面 通过 实例 练习 网 页 文本 与 段落 的 设置 方法 。 
回 使 用 Dreamweaver CC 打开 网 页 文档 ， 如 图 2-27 所 示 。 
加 切换 到 代码 视图 ， 在 文字 的 前 面 输入 代码 “<font color="#608801" face=" 宋 体 "size="4">”， 设 
置 文字 的 字体 、 大 小 、 颜 色 ， 如 图 2-28 所 示 。 


图 2-27 打开 网 页 文档 图 2-28 输入 代码 


园 在 代码 视图 中 ， 在 文字 的 最 后 面 输入 代码 “</font>”， 如 图 2-29 所 示 。 
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国 打开 代码 视图 ， 在 文本 中 输入 代码 “<p>……</p>”， 即 可 将 文字 分 成 相应 的 段落 ， 如 图 2-30 
所 示 。 
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图 2-29 输入 代码 图 2-30 输入 段落 标记 
园 在 拆 分 视图 中 ， 在 第 2 段 文 字 的 前 面 输入 代码 “<p align="center">”， 设 置 文本 的 段落 左 对 齐 ， 
如 图 2-31 所 示 。 
园 在 拆 分 视图 中 ， 在 文字 中 相应 的 位 置 输入 “&nbsp:&nbsp:”， 设 置 空格 ， 如 图 2-32 所 示 。 
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图 2-31 输入 段落 的 对 齐 标记 图 2-32 输入 空格 标记 
保存 网 页 ， 在 浏览 器 中 预览 效果 ， 如 图 2-33 所 示 。 


环保 材料 必 一 


二 要 时 


二 


-33 ”设置 页 面 及 文本 段落 的 效果 
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一 、 填 空 题 


(1) 标记 用 来 控制 字体 、 字 号 和 颜色 等 属性 ， 它 是 HTML 中 最 基本 的 标记 之 一 。 

(2) 是 HTML 文 档 中 最 常见 的 标记 ， 用 来 起 始 一 个 段落 。 段 落 标记 
可 以 没有 结束 标记 ， 而 每 一 个 新 的 段落 标记 开始 的 同时 也 意味 着 上 一 个 段落 的 结束 。 

(3) 在 网 页 中 如 果 某 一 行 的 文本 过 长 ， 浏 览 器 会 自动 对 这 段 文字 进行 换行 处 理 。 可 以 使 


用 标记 来 禁止 自动 换行 。 


(4) 标记 代表 水 平分 割 模式 ， 并 会 在 浏览 器 中 显示 一 条 线 。 网 页 的 多 媒体 元 
素 一 般 包 括 动态 文字 、 动 态 图 像 、 声 音 以 及 动画 等 ， 其 中 最 简单 的 就 是 添加 一 些 滚动 效果 ， 使 


用 标签 可 以 将 文字 设置 为 动态 滚动 的 效果 。 
二 、 操 作 题 
设置 页 面 文本 及 段落 的 具体 实例 ， 如 图 2-34 所 示 。 


图 2-34 设置 页 面 文本 及 段落 的 效果 


© 在 各 种 各 样 的 网 页 中 ， 极 少 看 见 没有 文字 的 网 页 ， 文 字 在 网 页 中 可 以 
起 到 信息 传递 、 导 航 及 交互 作用 。 在 网 页 中 添加 文字 并 不 困难 ， 可 主要 问题 是 如 何 编排 这 些 文 


字 ， 以 及 控制 这 些 文字 的 显示 方式 ， 让 文字 看 上 去 编排 有 序 、 整 齐 美观 。 本 课 3 


要 讲述 了 设置 


文字 格式 、 设 置 段 落 格式 、 设 置 水 平 线 的 使 用 。 通 过 本 课 的 学 习 ， 读 者 应 对 网 页 中 文字 格式 和 


段落 格式 的 应 用 有 一 个 深刻 的 了 解 。 


第 3 课 
用 HTML 创 建 精彩 的 
图 像 和 多 媒体 页 面 


本 课 导读 
图 像 是 网 页 中 不 可 缺少 的 元 素 ， 巧 妙 地 在 网 页 中 使 用 图 像 可 以 为 网 页 
增色 不 少 。 网 页 美化 最 简单 、 最 直接 的 方法 就 是 在 网 页 上 添加 图 像 ， 图 像 
不 但 使 网 页 更 加 美观 、 形 象 和 生动 ， 而 且 使 网 页 中 的 内 容 更 加 丰富 多 彩 。 
利用 图 像 创建 精美 的 网 页 ， 能 够 给 网 页 增加 生机 ， 从 而 吸引 更 多 的 浏览 
者 。 在 网 页 中 ， 除 了 可 以 插入 文本 和 图 像 外 ， 还 可 以 插入 动画 、 声 音 、 视 
频 等 媒体 元 素 ， 如 滚动 效果 、Flash、Applet、ActiveX 及 Midi 声 音 文件 等 。 
通过 对 本 课 的 学 习 ， 读 者 可 以 学 习 到 多 媒体 文件 的 使 用 ， 从 而 丰富 网 页 的 
效果 ， 吸 引 浏览 者 的 注意 。 


技术 要 点 
网 页 中 常见 的 图 像 格式 
插入 图 像 并 设置 图 像 属 性 
添加 多 媒体 文件 


添加 背景 音乐 


创建 多 媒体 网 页 


创建 图 文 混合 排版 网 页 


多 媒体 效果 文 混合 排版 


2 同 课堂 实录 


3 | 网 页 中 常见 a 


每 天 在 网 络 上 交流 的 计算 机 数不胜数 ， 因 此 使 用 的 图 像 格式 一 定 能 

够 被 每 一 个 操作 平台 接受 ， 当 前 万 维 网 上 流行 的 图 像 格 式 通常 以 GIF 和 JPEG 为 主 。 另 外 还 有 
一 种 名 叫 PNG 的 文件 格式 ， 也 被 越 来 越 多 地 应 用 在 网 络 中 ， 下 面 就 对 这 3 种 图 像 格式 的 特点 
进行 介绍 。 
1. GIF 格式 

GIF 是 英文 单词 Graphic Interchange Format 的 缩写 ， 即 图 像 交 换 格 式 ， 文 件 最 多 可 使 用 256 
种 颜色 ， 最 适合 显示 色调 不 连续 或 具有 大 面积 单一 颜色 的 图 像 ， 例 如 导航 条 、 按 钮 、 图 标 、 徽 
标 或 其 他 具有 统一 色彩 和 色调 的 图 像 。 

GIF 格式 的 最 大 优点 就 是 可 制作 动态 图 像 ， 可 以 将 数 张 静 态 文件 作为 动画 帧 串联 起 来 ， 转 
换 成 一 个 动画 文件 。 

ee 可 以 将 图 像 以 交错 的 方式 在 网 页 中 呈现 。 所 谓 交 错 显 示 ， 就 是 当 
图 像 尚 未 下 载 完 成 时 ， 浏 览 器 会 先 以 马赛 克 的 形式 将 图 像 慢 慢 显 示 ， 让 浏览 者 可 以 大 略 猜 出 下 
载 图 像 的 雏形 。 
2. JPEG 格 式 

JPEG 是 英文 单词 Joint Photographic Experts Group 的 缩写 ， 它 是 一 种 图 像 压缩 格式 。 此 文件 
格式 是 用 于 摄影 或 连续 色调 图 像 的 高 级 格式 ， 这 是 因为 JPEG 文 件 可 以 包含 数 百 万 种 颜色 。 随 着 
JPEG 文 件 品质 的 提高 ， 文 件 的 大 小 和 下 载 时 间 也 会 随 之 增加 。 通 常 可 以 通过 压缩 JPEG 文 件 在 
图 像 品质 和 文件 大 小 之 间 达 到 良好 的 平衡 。 

JPEG 格 式 是 一 种 压缩 得 非常 紧凑 的 格式 ， 专 门 用 于 不 含 大 色 块 的 图 像 。JPEG 图 像 有 一 定 
的 失真 度 ， 但 是 0 而 JPEG 文 件 只 有 GIF 文 
件 的 114。JPEG 对 图 标 之 类 的 含 大 色 块 的 图 像 不 是 很 有 效 ， 不 支持 透明 图 和 动态 图 ， 但 它 能 够 
eg pig 如 果 图 像 需 要 全 彩 模式 才能 表现 效果 的 话 ，JPEG 就 是 最 佳 的 选择 。 
3. PNG 格 式 

PNG (Portable Network Graphics) 图 像 格式 是 一 种 非 破坏 性 的 网 页 图 像 文 件 格式 ， 它 提供 
了 将 图 像 文 件 以 最 小 的 方式 压缩 却 又 不 造成 图 像 失 真 的 技术 。 它 不 仅 具 备 了 GIF 图 像 格式 的 大 
部 分 优点 ， 而 且 还 支持 48-bit 的 色彩 ， 更 快 地 交错 显示 ， 跨 平台 的 图 像 亮度 控制 ， 更 多 层 的 透 
明度 设置 。 


插入 图 像 并 设置 图 像 属性 


@ 今天 看 到 的 丰富 多 彩 的 网 页 ， 都 是 因为 有 了 图 像 的 作用 。 想 一 
过 去 ， 网 络 中 全 部 都 是 纯 文 本 的 网 页 ， 非 常 枯燥 ， 就 知道 图 像 在 网 页 设计 中 的 重要 性 了 。 在 
HTML 页 面 中 可 以 插入 图 像 ， 并 设置 图 像 属性 。 


人 3.2.1 图 像 标记 : im 
有 了 图 像 文件 后 ， 就 可 以 使 用 img 标 记 将 图 像 插入 到 网 页 中 ， 从 而 达到 美化 网 页 的 效果 。 
img 元 素 的 相关 属性 如 表 3-1 所 示 。 


@ _。 第 3 刘 上 ENIIOJES 和 区 J9 芝 下 用 要 页 疯 柯 


表 3-1 img 元 素 的 相关 属性 | ( 续 表 ) 


start 设 定 avi 文 件 播放 方式 


图 像 的 源 文件 : 
alt 提示 文字 : lowsrc 设 定 低 分 辩 率 图 片 
width，height 宽度 和 高 度 | usemap 映像 地 图 
border 边框 : 基本 语法 : 
i Ca 
hspace 水 平 间 距 : 
align 排列 : 语法 说 明 : 
dynste 设 定 avi 文 件 的 播放 | 在 语法 中 ，src 参 数 用 来 设置 图 像 文件 所 


设 定 avi 文 件 循环 播放 次 数 
设 定 avi 文 件 循环 播放 延迟 


| 在 的 路 径 ， 这 一 路 径 可 以 是 相对 路 径 ， 也 可 
i 以 是 绝对 路 径 。 


国 3.2.2 课堂 小 实例 一 一 设置 图 像 高 度 〈height) 一 一 一 一 一 


loopdelay 


height 属 性 用 来 定义 图 片 的 高 度 ， 如 果 <img> 元 素 不 定义 高 度 ， 图 片 就 会 按照 它 的 原始 尺寸 
显示 。 


基本 语法 : 


语法 说 明 : 
在 该 语法 中 ，height 设 置 图 像 的 高 度 。 
实例 代码 : 


在 代码 中 加 粗 部 分 的 第 1 行 标记 是 使 用 
“height="243"” 设 置 图 像 高 度 为 243， 而 第 2 
行 标 记 是 使 用 “height="158"” 调 整 图 像 的 高 
度 为 158， 在 浏览 器 中 预览 ， 可 以 看 到 调整 图 
像 的 高 度 ， 如 图 3-1 所 示 。 


图 3-1 调整 图 像 的 高 度 


TIE 课堂 实录 “~e® 


轩 3.2.3 ”课堂 小 实例 一 设置 图 像 帝 度 (Width) 一 一 一 一 一 一 0 


width 属性 用 来 定义 图 片 的 宽度 ， 如 果 <img> 元 素 不 定义 宽度 ， 图 片 就 会 按照 它 的 原始 尺寸 
显示 。 

基本 语法 : 
it 

语法 说 明 ， 

在 该 语法 中 ，width 设 置 图 像 的 宽度 。 


实例 代码 : 


在 代码 中 加 粗 部 分 的 第 1 行 标 记 是 使 用 
“width="335"” 设 置 图 像 宽度 为 335， 而 第 2 
行 标 记 是 使 用 “width="215"” 调 整 图 像 的 宽 
度 为 215， 在 浏览 器 中 预览 ， 可 以 看 到 调整 图 
像 的 宽度 ， 如 图 3-2 所 示 。 


图 3-2 调整 图 像 的 宽度 


国 3.2.4 课堂 小 实例 一 设置 图 像 的 边框 (border) 一 一 一 一 
默认 情况 下 ， 图 像 是 没有 边框 的 ， 使 用 img 标 记 符 的 border 属 性 ， 可 以 定义 图 像 周 围 的 边框。 


基本 语法 : 

语法 说 明 : 

在 该 语法 中 ，border 的 单位 是 像素 ， 值 越 大 边框 越 宽 。HTML4.01 不 推荐 使 用 图 像 的 
"border" 属 性 。 但 是 所 有 主流 浏览 器 均 支持 该 属性 。 

实例 代码 : 
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在 代码 中 加 粗 部 分 的 标记 第 1 行为 没有 为 图 像 添加 边框 ， 第 2 行 是 使 用 “border="5"” 为 图 
像 添加 边框 ， 在 浏览 器 中 预览 ， 可 以 看 到 添加 的 边框 效果 为 5 像素 ， 如 图 3-3 所 示 。 


图 3-3 添加 图 像 边框 效果 
月 3.2.5 课堂 小 实例 一 一 设置 图 像 水 平 间距 (hspace)〉 一 一 一 0 
通常 浏览 器 不 会 在 图 像 和 其 周围 的 文字 之 间 留 出 很 多 空间 。 除 非 创建 一 个 透明 的 图 像 边框 
来 扩大 这 些 间 距 ， 否 则 图 像 与 其 周围 文字 之 间 默 认 的 两 个 像素 的 距离 ， 对 于 大 多 数 设计 者 来 说 
是 太 近 了 。 可 以 在 img 标 记 符 内 使 用 属性 hspace 设 置 图 像 周围 的 空白 ， 通 过 调整 图 像 的 边 距 ， 可 
以 使 文字 和 图 像 的 排列 显得 紧凑 ， 看 上 去 更 加 协调 。 
基本 语法 : 


语法 说 明 : 

通过 hspace， 可 以 以 像素 为 单位 ， 指 定 图 像 左 边 和 右边 的 文字 与 图 像 之 间 的 间距 ， 水 平 边 
距 hspace 属 性 的 单位 是 像素 。 

实例 代码 : 
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在 代码 中 加 粗 部 分 的 标记 “hspace="100"” 是 为 图 像 添 加 水 平 边 距 ， 在 浏览 器 中 预览 ， 可 
以 看 到 设置 的 水 平 边 距 为 100 像 素 ， 如 图 3-4 所 示 。 


图 3-4 设置 图 像 的 水 平 边 距 效 果 


人 性 3.2.6 课堂 小 实例 一 -设置 图 像 垂 直 间 距 (Vspace) 一 一 一 0 
vspace 是 上 面 的 或 下 面 的 文字 与 图 像 之 间 的 距离 的 像素 数 。 
基本 语法 : 
ee 
语法 说 明 ， 
在 该 语法 中 ，vspace 属 性 的 单位 是 像素 。 
实例 代码 : 


在 代码 中 加 粗 部 分 的 标记 “vspace="50"” 是 为 图 像 添加 垂直 边 距 ， 在 浏览 器 中 预览 ， 可 以 
看 到 设置 的 垂直 边 距 为 50 像 素 ， 如 图 3-5 所 示 。 
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图 3-5 设置 图 像 的 要 直 边 距 效 果 


月 3.2.7 课堂 小 实例 一 一 设置 图 像 的 对 齐 方式 (align) 一 一 一 一 0 
<img> 标 签 的 align 属 性 定义 了 图 像 相 对 于 周围 元 素 的 水 平和 垂直 对 齐 方式 。 
基本 语法 : 
语法 说 明 : 
可 以 通过 <img> 标 签 的 align 属 性 来 控制 带 有 文字 包围 的 图 像 的 对 齐 方 式 。HTML 和 XHTML 
标准 指定 了 5 种 图 像 对 齐 属性 值 ，left、right、top、middle 和 bottom。align 的 取 值 见 表 3-2。 


表 3-2 align 的 取 值 
把 图 像 与 底部 对 齐 
top 把 图 像 与 顶部 对 齐 
middle 把 图 像 与 中 央 对 齐 
left 把 图 像 对 齐 到 左边 
right 把 图 像 对 齐 到 右边 
实例 代码 : 
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在 代码 中 加 粗 部 分 的 标记 “align="right"” 是 为 图 像 设 置 对 齐 方式 ， 在 浏览 器 中 预览 效果 ， 
可 以 看 出 图 像 是 右 对 齐 ， 如 图 3-6 所 示 。 


EC 二 
| SH WARE BEV CaN TEM Wo 


样 ， 地 域 广 网 的 中 华 民族， 由 于 各 地 气候 、 物 产 、 风 俗 习 惯 的 短 异 ， 自 古 以 永 ， 中 华 饮食 上 就 形成 了 许多 各 不 
a 入 扩大 和 和 gs 


|， 一 年 四 闪 ， 按 关节 | 人 和 特 古 . 中 国 


多 ee SS 
4 2 
和 本 


3 
Ei 本 


图 3-6 图像 设置 对 齐 方式 


国 3.2.8 课堂 小 实例 一 一 设置 图 像 的 替代 文字 〈alt) 
<img> 标 签 的 alt 属 性 指定 了 蔡 代 文本 ， 用 于 在 图 像 无 法 显示 或 者 用 户 禁用 图 像 显示 时 ， 代 
蔡 图 像 显示 在 浏览 器 中 的 内 容 。 强 烈 推荐 在 文档 的 每 个 图 像 中 都 使 用 这 个 属性 。 这 样 即使 图 像 
无 法 显示 ， 用 户 还 可 以 了 解 到 信息 。 
基本 语法 : 


语法 说 明 

alt 属 性 的 值 是 一 个 最 多 可 以 包含 1024 个 字符 的 字符 审 ， 其 中 包括 空格 和 标点 。 这 个 字符 囊 
必须 包含 在 引号 中 。 这 段 alt 文 本 中 可 以 包含 对 特殊 字符 的 实体 引用 ， 但 它 不 允许 包含 其 他 类 别 
的 标记 ， 尤 其 是 不 允许 有 任何 样式 标签。 

实例 代码 ; 


@ oo 第 3 刘 上 ENIIOIES 和 区 JW 下 要 下 用 术 责 商 厅 


在 代码 中 加 粗 部 分 的 标记 “alt= "美食 "” 是 添加 图 像 的 提示 文字 ， 在 浏览 器 中 预览 ， 可 以 
看 到 添加 的 提示 文字 ， 如 图 3-7 所 示 。 


风味 交 样 。 地 域 广阔 的 中 华 民 族 ， 由 于 各 地 气 收 、 物 产 、 风 省 习惯 的 差 号 ， 自 古 以 来 ， 中 华 饮食 上 就 形成 
了 许多 各 不 相同 的 荣 系 。 就 地 方 划分 而 专 ， 有 巴 欧 、 准 场 、 齐 重 、 粤 同 四 大 十 系 之 分 , 


四 季 有 别 ， 一 年 四 季 ， 接 季节 而 调配 饮食 ， 是 中 国 公 的 主要 口 和 


i 
a i 司 j 
吾 半 出 各 种 各 样 的 兰 食 ， 独 树 一 肉 达 到 


的 统 和 


广 晶 情 超 。 中 国友 锋 店 十 以 未 就 注重 品 昧 情趣， 不仅 对 饭 芝 点 


Bs 


EE 关外 备 下 ， 


图 3-7 添加 提示 文字 效果 


3 3 添加 多 媒体 文件 


如 果 能 在 网 页 中 添加 音乐 或 视频 文件 ， 可 以 使 单调 的 网 页 变 得 更 加 生 
动 ， 但 是 如 果 要 正确 浏览 做 入 这 些 文件 的 网 页 ， 就 需要 在 客户 端的 计算 机 中 安装 相应 的 播放 软 
件 ， 在 网 页 中 常见 的 多 媒体 文件 包括 声音 文件 和 视频 文件 。 
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从 3.3.1 课堂 小 实例 一 一 添加 多 媒体 文件 标记 (embed) 
基本 语法 : 
<embed src=" 多 媒体 文件 地 址 ” width=" 多 媒体 的 宽度 "” height=" 多 媒体 的 高 度 "” ></embed> 
语法 说 明 : 
在 语法 中 ，width 和 height 一 定 要 设置 ， 单 位 是 像素 ， 否 则 无 法 正确 显示 播放 多 媒体 的 软件 。 
实例 代码 : 


<!doctype html> 


<html> 

<meta charset="utf-8"> 

<head> 

<title> 添 加 多 媒体 文件 标记 </title> 

</head> 

<body> 

<embed src="images/1b.swf" width="980" height="280"></embed> 
</body> 

</html> 


在 代码 中 加 粗 部 分 的 代码 标记 是 插入 多 媒体 ， 在 浏览 器 中 预览 插入 的 Flash 效 果 ， 如 图 3-8 
所 示 。 
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图 3-8 插入 多 媒体 文件 效果 


轩 3.3.2 课堂 小 实例 一 一 设置 自动 运行 (autostart) 

基本 语法 : 
<embed src=" 多 媒体 文件 地 址 ”width=" 多 媒体 的 宽度 ”height=" 多 媒体 的 高 度 ” autostart=" 是 否 自动 运行 " 
loop=" 是 否 循环 播放 " ></embed> 

语法 说 明 : 

Autostart 的 取 值 有 两 个 ， 一 个 是 true， 表 示 自 动 播放 ; 另 一 个 是 false， 表 示 不 自动 播放 。 
loop 的 取 值 不 是 具体 的 数字 ， 而 是 true 或 false， 如 果 取 值 为 tue， 则 表示 媒体 文件 将 无 限 次 地 循 
环 播放 ; 而 如 果 取 值 为 false， 则 只 播放 一 次 。 

实例 代码 : 


<!doctype html> 


<html> 
<meta charset="utf-8"> 
<head> 


<title> 添 加 多 媒体 文件 标记 </title> 


ML 创建 精采 


在 代码 中 加 粗 部 分 的 代码 标记 是 插入 多 媒体 设置 自动 运行 ， 在 浏览 器 中 预览 插入 的 Flash 效 
果 ， 如 图 3-9 所 示 。 


图 3-9 插入 多 媒体 设置 自动 运行 效果 


3 cl 2 
， 4 添加 | 去] 景 首 乐 
@ 许多 有 特色 的 网 页 上 放置 了 背景 音乐 ， 随 网 页 的 打开 而 循环 播放 。 在 


网 页 中 加 入 一 段 背景 音乐 ， 只 要 用 bgsound 标 记 就 可 以 实现 。 


公 3.4.1 课堂 小 实例 一 一 设置 背景 音乐 (bgsound) 一 一 一 一 
在 网 页 中 ， 除 了 可 以 嵌入 普通 的 声音 文件 外 ， 还 可 以 为 某 个 网 页 设置 背景 音乐 
基本 语法 : 


语法 说 明 : 

src 是 音乐 文件 的 地 址 ， 可 以 是 绝对 路 径 也 可 以 是 相对 路 径 。 背 景 音乐 的 文件 可 以 是 avi、 
mp3 等 声音 文件 。 

实例 代码 : 
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</body> 
</html> 

在 代码 中 加 粗 部 分 的 代码 标记 “<bgsound src="images/yinyue.wav"> ”是 插入 背景 音乐 ， 在 
浏览 器 中 预览 ， 可 以 昕 到 音乐 效果 ， 如 图 3-10 所 示 。 在 制作 网 页 时 ， 添 加 一 种 背景 音乐 ， 可 以 
使 网 页 更 加 引信 注意 。 


图 3-10 插入 背景 音乐 效果 


侦 3.4.2 课堂 小 实例 一 一 设置 循环 播放 次 数 〈loop) 
通常 情况 下 ， 背 景 音乐 需要 不 断 地 播放 ， 可 以 通过 设置 loop 来 实现 循环 次 数 的 控制 
基本 语法 : 

<bgsound src=" 背 景 音乐 的 地 址 ”1oop=" 播 放 次 数 "> 


语法 说 明 : 
loop 是 循环 次 数 ，-1 是 无 限 循环 。 
实例 代码 : 

<!doctype html> 

<html> 


<meta charset="utf-8"> 

<head> 

<title> 设 置 循环 播放 次 数 </title> 

</head> 

<body > 

<img src="images/index.jpg" width="1002" height="610" /> 
<bgsound src="images/yinyue.wav" loop="5"> 

</body> 

</html> 


在 代码 中 加 粗 部 分 的 代码 标记 “loop="5"” 设 置 插入 的 背景 音乐 循环 播放 次 数 ， 在 浏览 器 
中 预览 ， 可 以 听 到 背景 音乐 循环 播放 5 次 后 ， 自 动 停止 播放 的 效果 ， 如 图 3-11 所 示 。 
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图 3-11 背景 音乐 循环 播放 5 次 后 自动 停止 效果 


要 ww 


本 课 主要 讲述 了 网 页 中 常用 的 图 像 格式 及 如 何在 网 页 中 插入 图 像 、 设 
置 图 像 属 性 、 在 网 页 中 插入 多 媒体 等 。 下 面 通过 以 上 所 学 到 的 知识 讲述 两 个 实例 。 


且 3.5.1 实例 1 一 一 创建 多 媒体 网 页 
下 面 将 通过 具体 的 实例 来 讲述 创建 多 媒体 网 页 ， 具 体操 作 步骤 如 下 。 


回 使 用 Dreamweaver CC 打开 网 页 文档 ， 如 图 3-12 所 示 。 
园 打开 拆 分 视图 ， 在 相应 的 位 置 输入 代码 “<embed src="images/top.swf" width="978" 
height="238"></embed>”， 如 图 3-13 所 示 。 
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图 3-12 ”打开 网 页 文档 | 图 3-13 输入 代码 
因 将 光标 置 于 body 的 后 面 ， 输 入 背景 音乐 代码 “<bgsound src="images/gequ.wav">”， 如 图 3-14 
所 示 。 
四 在 代码 中 输入 播放 的 次 数 ，“<bgsound src="images/gequ-wav" loop= "infinite ">”， 如 图 3-15 所 示 。 
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效果 如 图 3-16 所 示 。 
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图 3-16 多 媒体 效果 


图 3-15 输入 播放 次 数 代码 


旧 3.5.2 ”实例 2 一 一 创建 图 文 混合 排版 网 贡 - 一 -一 0 
虽然 网 页 中 提供 各 种 图 片 可 以 使 网 页 显得 更 加 漂亮 ， 但 有 时 也 需要 在 图 片 旁 边 添加 一 些 文 

字 说 明 。 图 文 混 排 一 般 有 几 种 方法 ， 对 于 初学 者 而 言 ， 可 以 将 图 片 放置 在 网 页 的 左 侧 或 右 侧 ， 

然后 将 文字 内 容 放置 在 图 片 旁 边 。 下 面 讲述 图 文 混 排 的 方法 ， 具 体 步 骤 如 下 。 

国 使 用 Dreamweaver CC 打开 网 页 文档 ， 如 图 3-17 所 示 。 

园 打开 代码 视图 ， 将 光标 置 于 相应 的 位 置 ， 输 入 图 像 代码 “<imgsre="images/ chanpin.jpg" >”， 如 
图 3-18 所 示 。 
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图 3-17 打开 网 页 文档 图 3-18 输入 图 像 代码 


园 在 代码 视图 中 输入 “width="300" height="225"”， 设 置 图 像 的 高 和 宽 ， 如 图 3-19 所 示 。 
园 在 代码 视图 中 输入 “hspace="10" vspace="5"”， 设 置 图 像 的 水 平 边 距 和 垂直 边 距 ， 如 图 3-20 所 示 。 
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图 3-19 设置 图 像 的 高 和 宽 图 3-20 ”设置 图 像 的 水 平 边 距 和 垂直 边 距 


国 在 代码 视图 中 输入 “align="left'”， 用 来 设置 图 像 的 对 齐 方式 为 “ 左 对 齐 ”， 如 图 3-21 所 示 。 
国 保存 文档 ， 按 <F12> 键 在 浏览 器 中 预览 ， 如 图 3-22 所 示 。 
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图 3-21 设置 图 像 的 对 齐 方式 图 3-22 图 文 混合 排版 效果 

3.6 
一 、 填 空 题 

〈1) 当前 万 维 网 上 流行 的 图 像 格式 通常 以 和 为 主 。 另 外 还 有 一 种 名 
叫 的 文件 格式 ， 也 被 越 来 越 多 地 应 用 在 网 络 中 。 

(2) 软 认 情况 下 ， 图 像 是 没有 边框 的 ， 使 用 “标记 符 的 属性 ， 可 以 给 图 
像 添 加 边框 效果 。 

(3) 许多 有 特色 的 网 页 上 放置 了 背景 音乐 ， 随 网 页 的 打开 而 循环 播放 。 在 网 页 中 加 入 一 
股 背景 音乐 ， 只 要 用 标记 就 可 以 实现 。 
二 、 操 作 题 


在 网 页 中 插入 图 像 并 设置 图 像 属性 ， 如 图 3-23 所 示 。 
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图 3-23 插入 图 像 


@ 在 网 页 中 使 用 图 像 ， 可 以 使 网 页 更 加 4 


E 动 和 美观 ， 


岗 在 几乎 在 所 有 


的 网 页 中 都 可 以 看 到 大 量 的 图 像 。 本 课 介 绍 了 在 网 页 中 插入 多 媒体 的 知识 ， 在 HTML 代 码 中 插 


入 声音 、 插 入 视频 等 。 通 过 本 课 的 学 习 ， 读 者 可 以 了 解 网 页 图 


JPEG 和 PNG) ， 以 及 插入 图 像 和 设置 图 像 的 属性 ， 读 者 应 对 网 


像 支持 的 3 种 图 


像 格式 〈GIF、 


页 中 多 媒体 的 应 用 有 一 个 深刻 的 


了 解 和 简单 的 运用 ， 以 便 在 制作 自己 的 网 页 时 利用 这 些 元 素 为 


网 页 生 香 添 ; 


色 。 


第 4 课 
用 HTML 创 建 超 链接 


本 课 导 读 

超级 链接 是 HTML 文 档 的 最 基本 特征 之 一 。 超 级 链接 的 英文 名 
是 hyperlink， 它 能 够 让 浏览 者 在 各 个 独立 的 页 面 之 间 方 便 地 跳 转 。 
每 个 网 站 都 是 由 众多 的 网 页 组 成 的 ， 网 页 之 间 通 常 都 是 通过 链接 方 
式 相互 关联 的 。 各 个 网 页 链接 在 一 起 后 ， 才 能 真正 构成 一 个 网 站 。 


技术 要 点 

太 ”链接 和 路 径 
链接 元 素 a 
创建 图 像 的 超 链接 


太 
太 
六” 创建 锚 点 链接 
太 


给 网 页 添加 链接 


给 网 页 添加 链接 


TIE 课堂 实录 “ee 一 个 


4 | 链接 和 路 径 


超 链接 是 网 页 中 最 重要 的 元 素 之 一 ， 是 从 一 个 网 页 或 文件 到 另 一 个 网 
页 或 文件 的 链接 ， 包 括 图 像 或 多 媒体 文件 ， 还 可 以 指向 电子 邮件 地 址 或 程序 。 在 网 页 上 加 入 超 
链接 ， 就 可 以 把 Intemet 上 众多 的 网 站 和 网 页 联系 起 来 ， 构 成 一 个 有 机 的 整体 。 


且 4.1.1 超 链接 的 基本 概念 
超级 链接 由 源 地 址 文件 和 目标 地 址 文件 构成 ， 当 访问 者 单 击 超 链接 时 ， 浏 览 器 会 从 相应 的 
目标 地 址 检索 网 页 并 显示 在 浏览 器 中 。 如 果 目 标 地 址 不 是 网 页 而 是 其 他 类 型 的 文件 ， 浏 览 器 会 
自动 调用 本 机 上 的 相关 程序 打开 所 有 访问 的 文件 。 
链接 由 以 下 3 个 部 分 组 成 。 
友 ”位 置 点 标记 <a>， 将 文本 或 图 片 标识 为 链接 。 
友 ”属性 hre 全 "…"， 放 在 位 置 点 起 始 标记 中 。 
六 地 址 〈 称 为 URL) ， 浏 览 器 要 链接 的 文件 。URL 用 于 标识 Web 或 本 地 磁盘 上 的 文件 位 置 ， 
这 些 链接 可 以 是 指向 某 个 HTML 文档 ， 也 可 以 指向 文档 引用 的 其 他 元 素 ， 如 图 形 、 脚 本 或 
其 他 文件 。 


卜 4.1.2 课堂 小 实例 一 一 路 径 url 

如 果 在 引用 超 链 接 文件 时 ， 使 用 了 错误 的 文件 路 径 ， 就 会 导致 引用 失效 ， 无 法 浏览 链接 文 
件 。 为 了 避免 这 些 错 误 ， 正 确 地 引用 文件 ， 我 们 需要 学 习 一 下 HTML 路 径 。 

路 径 URL 用 来 定义 一 个 文件 、 内 容 或 者 媒体 等 的 所 在 地 址 ， 这 个 地 址 可 以 是 相对 链接 ， 也 
可 以 是 一 个 网 站 中 绝对 地 址 ， 关 于 路 径 的 写法 ， 因 其 所 用 的 方式 不 同 有 相应 的 变换 。 

HTML 有 两 种 路 径 的 写法 : 相对 路 径 和 绝对 路 径 。 
1. HTML 相 对 路 径 

相对 路 径 就 是 指 由 这 个 文件 所 在 的 路 径 引 起 的 跟 其 他 文件 〈 或 文件 夹 ) 的 路 径 关系 。 使 用 
相对 路 径 可 以 为 我 们 带 来 非常 多 的 便利 。 

(1) 同一 个 目录 的 文件 引用 

如 果 源 文件 和 引用 文件 在 同一 个 目录 里 ， 直 接 写 引 用 文件 名 即 可 。 

我 们 现在 建 一 个 源 文件 about.html， 在 about.html 里 要 引用 index.html 文 件 作 为 超 链接 。 

假设 about.html 路 径 是 : ci\Inetpub\Wwwwroot\sitesnews\about.html。 

假设 index.html 路 径 是 : ci\Inetpub\Wwwwroot\sites\news\index.html。 

在 about.html 加 入 index.html 超 链接 的 代码 应 该 这 样 写 : 
<a href = "index.html">index.html</a> 


(2) 引用 上 级 目录 
./ 表 示 源 文件 所 在 目录 的 上 一 级 目录 ，././ 表 示 源 文件 所 在 目录 的 上 上 级 目录 ， 以 此 类 推 。 
假设 about.html 路 径 是 : ci\InetpubWwwwroot\sitesnmews\about.html。 
假设 index.html 路 径 是 : ci\InetpubWwwwroot\sites\index.html。 
在 about html 加 入 index html 超 链接 的 代码 应 该 这 样 写 : 
<a href = "../index.html">index.html</a> 


(3) 引用 下 级 目录 
引用 下 级 目录 的 文件 ， 直 接 写 下 级 目录 文件 的 路 径 即 可 。 


@_。 第/ 识 上 EW 有 和 
假设 about.html 路 径 是 : ci\InetpubWwwroot\sitesnews\about.html。 
假设 index.html 路 径 是 : ci\Inetpub\Wwwwroot\sites\news\html\index.html。 
在 about.html 加 入 index.html 超 链接 的 代码 应 该 这 样 写 : 


2. HTML 绝 对 路 径 

HTML 绝 对 路 径 指 带 域名 的 文件 的 完整 路 径 。 

比如 网 站 域名 是 www.baidu.com， 如 果 在 www 根 目录 下 放 了 一 个 文件 index.html， 这 个 文件 
的 绝对 路 径 就 是 : http://www.baidu.com/index.html。 

假设 在 www 根 目录 下 建 了 一 个 目录 叫 news， 然 后 在 该 目录 下 放 了 一 个 文件 index.html， 这 
个 文件 的 绝对 路 径 就 是 http://www.baidu.com/news/index.html。 


中 4.1.3 ”课堂 小 实例 一 一 HTTP 路 径 一 一 一 一 一 一 一 一 一 一 一 0 


链接 到 外 部 网 站 就 是 跳 转 到 当前 网 站 外 部 ， 这 种 链接 一 般 情况 下 需要 使 用 绝对 的 链接 地 
址 ， 经 常 使 用 HTTP 协 议 进行 外 部 链接 。HTTP 路 径 ， 用 来 链接 Web 服 务 器 中 的 文档 。 
基本 语法 : 


语法 说 明 : 
在 该 语法 中 ，http:// 表 明 这 是 关于 HTTP 协 议 的 外 部 链接 ， 在 其 后 输入 网 站 的 网 址 即 可 。 
实例 代码 : 


在 代码 中 加 粗 的 代码 标记 将 文字 “百度 ”的 链接 设置 为 “http://www.baidu.com”， 在 浏览 
器 中 浏览 效果 ， 如 图 4-1 所 示 ， 当 单 击 链接 文字 “百度 ”时 ， 就 会 打开 它 所 链接 的 百度 网 站 ， 


CE 开 #、 rpgST 一 HiEHtett 
区 
一 全 发 愉 人 和 一 二 二 工程 时 克明 加 了 、 现 人 化 
i 人 和 和 站 
机 覃 于 创新 开拓 得 。 
和 本本 和 和 和 


从 同安 而 并 更 检修 .ng 于 量 天 再 全 所 环 同人 江 ”| 


图 4-1 链接 到 外 部 网 站 


6l 
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国 4.1.4 ”课堂 小 实例 一 一 FTP 路 径 


FTP 是 一 种 文件 传输 协议 ， 它 是 计算 机 与 计算 机 之 间 能 够 相互 通信 的 语言 ， 通 过 FTP 可 以 
获得 Intermet 上 丰富 的 资源 。 

FTP 路 径 ， 用 来 链接 FTP〈) 服务 器 中 的 文档 ， 使 用 FTP 路 径 时 ， 可 以 在 浏览 器 中 直接 输入 
相应 的 FTP 地 址 ， 打 开 相 应 的 目录 或 下 载 相关 的 内 容 ， 也 可 以 使 用 相关 的 软件 ， 打 开 FTP 地 址 
中 相应 的 目录 或 者 下 载 相关 的 内 容 。 

基本 语法 : 


实例 代码 : 


在 代码 中 加 粗 部 分 的 标记 “<a href="ftp://ftp.pku.edu.cn/" >” 是 FTP 链 接 ， 在 浏览 器 中 预览 
效果 ， 如 图 4-3 所 示 ， 单 击 超 链接 可 以 链接 到 北京 大 学 FTP 服 务 器 ， 如 图 4-4 所 示 。 


FE | 
Oe ow SD- cx 
es POI Eo) Wah) Ta Wa | 
莹 是 一 TT 拉 ET 下 FTP 根 位 于 ftp. pku. edu. cn 
| 者 在 而 jaove 次 尖 管 理 习 中 查看 此 FTF 站 点 ， 沪 间 寺 “视图 ”， 关 后 单 击 “ 在 内 indows 资源 答 理 器 中 打开 
ITP 站点 ”。 
| |: 一- 
| Fobine University 
| 
ss sa ed 
图 4-3 ”FTP 链接 图 4-4 链接 到 FTP 服 务 器 


旧 4.1.5 课堂 小 实例 一 邮件 路 径 
在 网 页 上 创建 E-mail 链接 ， 可 以 使 浏览 者 能 够 快速 反馈 自己 的 意见 。 当 浏览 者 单 击 E-mail 
链接 时 ， 可 以 立即 打开 浏览 器 默认 的 E-mail 处 理 程 序 ， 收 件 人 邮件 地 址 被 E-mail 超 链接 中 指定 
的 地 址 自动 更 新 ， 无 须 浏览 者 输入 。 
基本 语法 : 


@_。。 第 / 课 有 ESTS9 可 IE 于 下 王 要 


语法 说 明 : 
在 该 语法 中 ， 电 子 邮 件 地 址 后 面 还 可 以 增加 一 些 参 数 ， 见 表 4-1。 
表 4-1 ”邮件 的 参数 


ce 抄 送 收 件 人 <a hre 人 "mailto: 电 子 邮 件 地 址 ?cc= 电 子 邮 件 地 址 "> 链接 内 容 </a> 

subject | 电子 邮件 主题 <a hre 全 "mailto: 电 子 邮件 地 址 ?subjec 人 主题 文字 "> 链接 内 容 </a> 

bcc 瞳 送 收 件 人 <a hre 全 "mailto: 电 子 邮件 地 址 ?bcc= 电 子 邮 件 地 址 "> 链接 内 容 </a> 

body 电子 邮件 内 容 <a hre 全 "mailto: 电 子 邮件 地 址 ?body= 邮 件 内 容 "> 链 接 内 容 </a> 
实例 代码 : 


在 代码 中 加 粗 的 代码 标记 “<a hre 合 "mailto:mailto: sdwdxia@163.com">” 用 于 创建 E-mail 链 
接 ， 在 浏览 器 中 浏览 效果 ， 如 图 4-5 所 示 ， 当 单 击 链接 文字 “联系 我 们 ”时 ， 会 打开 默认 的 电 
子 邮 件 软件 Outlook Express， 如 图 4-6 所 示 。 


文件 中 忽 强 中 查看 W)， 插入 GD 格式 中 I 上 I” 雇 | 


2 


a 2010 年 ， 是 生 各 类 由 于 产品 太 制 、 开 发 、 生 产 和 情 信 一体 的 高 科技 企业 
区 和 i 
| » 公司 钙 有 一 译 高村 不 术 平 的 全 发 信 和 一 妆 东 专业 工程 师 组 也 沪 太 友 团 认 、 避 优化 
公民 从 和 人 全， 和 从 要么 扩 和 加 呈 从 人 表 的 习 计 和 和 ， 在 六 所 
卫 ， 不断 各 轩 守 业 和 iR、 开 革新 产 和 。 
E 仆人。 于 于 创 斩 ， 开 村 浊 了 在 者 和 市 沁 


在 出 了 一 条 自主 创新 和 自主 开 并 的 谱 千 ， 用 一 闪 的 产品 引 贷 本 
和 ay 


imonansdscvagtaleom ET 


图 4-5 创建 E-mail 链 接 图 4-6 发送 电子 邮件 


4 Di 


超 链接 的 范围 很 广泛 ， 利 用 它 不 仅 可 以 进行 网 页 间 的 相互 链接 ， 还 可 
以 使 网 页 链接 到 相关 的 图 像 文 件 、 多 媒体 文件 及 下 载 程序 等 。 


国 4.2.1 课堂 小 实例 一 -指定 路 径 href 一 一 一 一 一 一 一 一 一 0 
链接 标记 <a> 在 HTML 中 既 可 以 作为 一 个 跳 转 其 他 页 面 的 链接 ， 也 可 以 作为 “埋设 ”在 文档 

中 某 处 的 一 个 “ 锚 定 位 ”，<a> 也 是 一 个 行内 元 素 ， 它 可 以 成 对 出 现在 一 段 文档 的 任何 位 置 。 
基本 语法 : 


语法 说 明 : 
在 该 语法 中 ，<a> 标 记 的 属性 值 如 表 4-2 所 示 。 
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表 4-2 ”<a> 标 记 的 属性 值 


属性 说 明 
指定 链接 地 址 
name 给 链接 命名 
title 给 链接 添加 提示 文字 


_target | 指定 链接 的 目标 窗口 
实例 代码 : 


在 代码 中 加 粗 部 分 的 代码 标记 为 设置 文档 中 的 超 链接 ， 在 浏览 器 中 预览 ， 可 以 看 到 链接 效 
如 图 4-8 所 示 。 


图 4-7 超 链 接 效果 图 4-8 超 链接 网 页 


上 4.2.2 显示 链接 目标 属性 target 
在 创建 网 页 的 过 程 中 ， 黑 认 情 况 下 超 链接 在 原来 的 浏览 器 窗口 中 打开 ， 可 以 使 用 target 属 性 
来 控制 打开 的 目标 窗口 。 
基本 语法 : 


@ _。 第/ 课 本 WI 站 于 过 可 


语法 说 明 : 
在 该 语法 中 ，target 参 数 的 取 值 有 4 种 ， 如 表 4-3 所 示 。 
表 4-3 ”target 参 数 的 取 值 


在 当前 页 面 中 打开 链接 
在 一 个 全 新 的 空白 窗口 中 打开 链接 


在 顶层 框架 中 打开 链接 ， 也 可 以 理解 为 在 根 框架 中 打开 链接 
在 当前 框架 的 上 一 层 里 打开 链接 
实例 代码 : 


在 代码 中 加 粗 的 代码 标记 “target="_blank"” 是 设置 内 部 链接 的 目标 窗口 ， 在 浏览 器 中 预 
览 单 击 设置 链接 的 对 象 ， 可 以 打开 一 个 新 的 窗口 ， 如 图 4-9 和 图 4-10 所 示 。 


| 
必定 全 ， 轨 中 的 1 全 和 站 所 和 二 革 。 
狂放 二 二 和 永和 。 所 以 扫 地 出 ,能 人 的 /六 交 | 
的 心态 ， 心情 。 | 
BE 和 ~ 


魏 们 不 但 要 各 己 快乐 ,证 有 殷 自己 的 快乐 才 享 给 必 的 训 友 、 家 人 甚至 是 素 不 相识 的 隔 生 人 。 因 为 分 享 
改 系 本 身 就 县 一 种 快 和 未 , 一 种 更 高 境界 的 快乐 。 

快乐 的 学 习 , 快 乐 的 生活 ,快乐 的 努力 ， 信 才能 成 , 心 夸 最 重要 … 

屋 所 有 从 快 乐 ! 


ow | 


图 4-9 设置 链接 目标 窗口 图 4-10 打开 的 目标 窗口 


用 4.2.3 ”链接 的 热 键 属性 accesskey 一 一 一 一 一 一 一 一 一 一 一 0 

HTMI 教 程 标签 中 的 AccessKey 属 性 相当 于 Windows 应 用 程序 中 的 <Alt> 快 捷 键 。 该 属性 可 
以 设置 某 个 HTML 元 素 的 快捷 键 ， 这 样 就 可 以 不 用 鼠标 定位 某 个 页 面 元 素 ， 而 只 用 快捷 键 <Alf> 
键 和 某 个 字母 键 ， 就 可 以 快速 切换 定位 到 页 面 对 象 上 。 
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基本 语法 : 


语法 说 明 : 

定义 了 accesskey 的 链接 可 以 使 用 快捷 键 (Alt+ 字 母 ) 访问 ， 主 菜单 与 导航 菜单 使 用 
accesskey， 通 常 是 不 错 的 选择 。 

实例 代码 : 


在 代码 中 加 粗 的 代码 标记 是 设置 链接 的 热 键 属性 ， 在 浏览 器 中 预览 效果 ， 如 图 4-11 所 示 。 


( 牧 住 键盘 上 的 h 控 钮 ， 再 按 回 车 GE) 就 可 接 到 程 。 
各 种 浏览 器 下 accesskey 快 捷 键 的 使 用 方法 。 

亚 浏览 器 

按 住 <Alp> 键 ， 点 击 accesskey 定 义 的 快捷 键 (焦点 将 移动 到 链接 )， 再 按 回 车 键 。 
FireFox 浏 览 器 

按 住 <AltrShif> 键 ， 点 击 accesskey 定 义 的 快捷 键 - 


Chrome 浏 览 器 

按 住 <Alt> 键 ， 点 击 accesskey 定 义 的 快捷 键 。 

Opera 浏 览 器 

按 住 <Shif> 键 ， 按 <Esc> 键 出 现 本 页 定义 的 accesskey 快 捷 键 列 表 可 供 选 择 。 


图 4-11 链接 的 热 键 属性 


@ _。 第 / 课 本 WV 可 过 要 


4. 3 创建 图 像 的 超 链接 


图 像 的 链接 包括 为 图 像 元 素 制作 链接 和 在 图 像 的 局 部 制作 链接 ， 其 中 
的 局 部 制作 链接 比较 复杂 ， 将 会 使 用 到 <map>、<area> 等 元 素 及 关 属 性 。 


ep 课堂 小 实例 一 一 创建 链接 区 域 元 素 <map> 一 一 一 一 一 一 0 


基本 语法 : 


语法 说 明 : 


创建 链接 区 域 元 素 <map>， 用 来 在 图 像 元 素 中 定义 一 个 链接 区 域 ，<map> 元 素 本 身 并 不 能 
指定 链接 区 域 的 大 小 和 链接 目标 ，<map> 元 素 的 主要 作用 ， 是 用 来 标记 链接 区 域 ， 页 面 中 的 图 
像 元 素 可 以 使 用 <map> 元 素 标 记 的 区 域 。 

实例 代码 : 


代码 中 加 粗 的 部 分 使 用 <map> 元 素 标记 的 区 域 ， 如 图 4-12 所 示 。 


De re mw- ch Ollel x 


图 4-12 输入 代码 


器 4.3.2 ”链接 区 域 的 名 称 属性 name 
链接 区 域 的 名 称 属性 name， 用 来 定义 链接 区 域 的 名 称 ， 方 便 图 像 元 素 的 调用 。 
基本 语法 : 
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语法 解释 : 
name 属 性 的 取 值 必须 是 唯一 的 。 
实例 代码 : 


代码 中 加 粗 的 部 分 


是 设置 链接 区 域 的 名 称 ， 如 图 4-1 


3 所 示 。 
DW An 国有 


旧 4.3.3 定义 鼠标 敏感 区 元 素 <area> 一 一 一 一 一 一 一 一 一 一 一 0 
定义 鼠标 敏感 区 元 素 <area>， 用 来 定义 链接 区 域 的 大 小 和 坐标 ， 同 时 可 以 指定 每 个 敏感 区 
域 的 链接 目标 。 语 法 结构 如 下 所 示 。 
基本 语法 : 


语法 说 明 : 


在 <area> 标 记 中 定义 了 热 区 的 位 置 和 链接 ， 其 中 shape 参 数 用 来 定义 热 区 形状 ， 热 点 的 形状 
包括 rect (和 矩形 区 域 》、circle (椭圆 形 区 域 》 和 poly (多 边 形 区 域 〉》3 种 ， 对 于 复杂 的 热点 图 像 
可 以 选择 多 边 形 工具 来 进行 绘制 。 

实例 代码 : 
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该 实例 中 ， 在 图 片 中 定义 了 3 个 链接 区 域 ， 如 图 4-14 所 示 。 代 码 运 行 后 ， 显 示 效 果 如 图 4-15 
所 示 。 


DW zu mits 5m END Wem mt) st) m5) OW 和 JE 人 Le 上 上 =- 
rr Oe 一 


图 4-14 输入 代码 图 4-15 预览 效果 


人 肯 4.3.4 ”链接 的 路 径 属性 href、nohref 
基本 语法 : 


语法 说 明 : 
在 <area> 标 记 中 定义 了 热 区 的 位 置 和 链接 ， 其 中 属性 href 设 置 了 链接 。 
实例 代码 : 
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该 实例 中 ， 在 图 片 中 定义 了 3 个 链接 区 域 ， 
分 别 链接 到 中 文 版 、 英 文 版 和 日 语 版 的 站 点 首 
页 。 在 图 片 的 局 部 制作 链接 后 ， 对 图 片 的 显示 
效果 并 没有 影响 。 其 代码 运行 后 ， 显 示 效 果 如 
图 4-16 所 示 。 


图 4-16 链接 路 径 效 果 


从 4.3.5 鼠标 敏感 区 坐标 属性 coords 
鼠标 敏感 区 坐标 属性 coords 用 来 定义 鼠标 敏感 区 域 的 大 小 和 位 置 。 根 据 敏感 区 域 的 形状 不 
同 ， 所 使 用 的 坐标 数目 也 会 有 所 变化 。 语 法 结构 如 下 所 示 。 
基本 语法 ; 


语法 说 明 : 

对 应 不 同形 状 的 敏感 区 域 ， 其 坐标 的 具体 定义 方法 如 下 所 述 。 
(1) 答 形 区 域 

定义 一 个 矩形 区 域 要 使 用 4 个 坐标 来 实现 ， 其 形式 如 下 所 示 。 


每 个 坐标 之 间 用 英文 的 逗号 分 隔 ， 其 中 x1、y1 表 示 托 形 区 域 左上 角 的 坐标 ，x2、y2 表 示 托 
形 区 域 右 下 角 的 坐标 。 图 片 的 左上 角 是 坐标 的 原点 ， 其 坐标 为 “0.0”。 

(2) 圆 形 区 域 

定义 一 个 圆 形 区 域 要 使 用 3 个 坐标 来 实现 ， 其 形式 如 下 所 示 。 


每 个 坐标 之 间 用 英文 的 逗号 分 隔 ， 其 中 x、y 坐 标 表示 圆 形 区 域 圆心 的 坐标 ，r 表 示 圆 形 区 
域 的 半径 的 长 度 。 
(3) 多 边 形 区 域 
定义 一 个 多 边 形 区 域 要 使 用 和 项 点 数目 相同 的 坐标 组 来 实现 ， 其 形式 如 下 所 示 。 


每 个 坐标 之 间 用 英文 的 逗号 分 隔 ， 其 中 每 组 x、y 坐 标 表示 多 边 形 区 域 的 一 个 顶点 。 
实例 代码 : 


@ 一 第/ 课 有 ETIISJE 到 王 玫 


<map name="zhongwen"> 
<area shape="rect" coords="338,468,402,515" href="zhongwen"” alt=" 华 春 食品 "> 
<area shape="circle" coords="455,505,30" href="yingwen"alt=" 品 "> 
<area shape="poly" coords="537,477,569,495,539,503" href="riyu"alt=" 华 春 食 品 "> 


</map> 


其 代码 运行 后 ， 按 下 <Tab> 键 ， 可 以 激活 链接 区 域 ， 其 中 第 一 个 矩形 区 域 的 显示 效果 如 
4-17 所 示 。 按 照 同样 的 方法 ， 激 活 后 的 圆 形 区 域 的 显示 效果 如 图 4-18 所 示 。 


四 


医 | 


| | 二 3 


图 4-17 ”矩形 形 区 域 的 显示 获 末 图 4-18 贺 形 及 区 拒 的 下 示 效 末 
下 载 文件 
@ 如 果 希 望 制作 下 载 文件 的 链接 ， 只 需 在 链接 地 址 处 输入 文件 所 在 的 位 


置 即 可 。 当 浏览 器 用 户 单 击 链接 后 ， 浏 览 器 会 自动 判断 文件 的 类 型 ， 以 做 出 不 同情 况 的 处 理 。 
基本 语法 : 
<a href="url"> 链 接 内 容 </a> 
语法 说 明 : 
如 果 超 级 链接 指向 的 不 是 一 个 网 页 文件 ， 而 是 其 他 文件 ， 例 如 zip、mp3、exe 文 件 等 ， 生 
击 链 接 的 时 候 就 会 下 载 文 件 。 


PE SN 


志 


I 网 站 中 每 个 下 载 文件 必须 对 应 一 个 下 载 链接 ， 而 不 能 为 多 个 文件 或 一 个 文件 夹 建 立 下 载 链 接 ， | 


Be 个 文件 或 文件 夹 提供 下 载 ， 只 能 利用 压缩 软件 将 这 些 文 件 或 文件 夹 压缩 为 一 个 文件 。 


i ey ee 
实例 代码 : 

<!doctype html> 

<html> 

<meta charset="utf-8"> 

<head> 

<title> 下 载 文件 链接 </title> 

</head> 

<body> 


<p> 


Fal 
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这 里 使 用 “<a hre 全 "qinghuarar">” 创 建 了 一 个 下 载 文件 的 链接 ， 在 浏览 器 中 浏览 效果 ， 
如 图 4-19 所 示 。 


Dd dd Om 


图 4-19 下 载 文 件 链接 


实战 应 用 一 给 网 页 添加 链接 


@ 通过 网 页 上 的 超级 链接 可 以 实现 在 网 上 方便 、 快 捷 的 访问 ， 它 是 
网 页 上 不 可 缺少 的 重要 元 素 ， 使 用 超级 链接 可 以 将 众多 的 网 页 链接 在 一 起 ， 形 成 一 个 有 机 整 
体 。 本 课 主 要 讲述 了 各 种 超级 链接 的 创建 ， 下 面 就 用 所 学 的 知识 来 给 页 面 添 加 各 种 链接 。 
使 用 Dreamweaver CC 打开 网 页 文档 ， 如 图 4-20 所 示 。 


图 4-20 打开 网 页 文档 
园 打开 代码 视图 ， 在 <body> 和 </body> 之 间 相应 的 位 置 输入 如 下 代码 ， 设 置 图 像 链接 ， 如 图 


4-21 所 示 。 


YX 


eatdeg sre-"aages/2hansht.jpg" width="749" heignt=nss® atrroyaclray 
tm 


betabts widtr"gs" border="g align-"center" cellpzcding="s" cellspacing [ob 


td width "3 >ins src-"inages/p3, jps” width="206" height="150" 


rd widehe "am eing sres"inages/pe. Jpg” wiceh="206" neght="1s0" alt 


eing sre="inages/p5.jpg" width="260" height="15e" 
ping sres"irages/p6.jpg” widthe"260" height="179" leg 
images/pT- Pg” wierhe"200" neight="1se" alre""/></ed> 


图 4-21 设置 图 像 链 接 


打开 代码 视图 ， 在 <body> 和 </body> 之 间 相 应 的 位 置 输入 如 下 代码 ， 设 置 图 像 的 热 区 链接 ， 如 
图 4-22 所 示 。 


ad 产品 懂 示 </td> 


eatevalrdy 


tg» «tne srcrofpages1dibu.jpgv width-"1903" hetght="92" 


Mpaptd 


图 4-22 设置 图 像 的 热 区 


园 保存 网 页 ， 在 浏览 器 中 预览 效果 ， 如 图 4-23 所 示 。 
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NIEM eo 


ee 一 辑 宁 绿化 


图 4-23 预览 效果 
人 课 后 练习 : 
“、 填 空 题 
(1) HIML 有 两 种 路 径 的 写法 : 和 ， 就 是 指 由 这 
个 文件 所 在 的 路 径 引起 的 跟 其 他 文件 〈 或 文件 夹 ) 的 路 径 关 系 。 _ _ 指 域名 文件 的 完 
整 路 径 。 


(2) 在 创建 网 页 的 过 程 中 ， 软 认 情 况 下 超 链 接 在 原来 的 浏览 器 窗口 中 打开 ， 可 以 使 用 
~ 属性 来 控制 打开 的 目标 窗口 。 

(3) 在 浏览 页 面 时 ， 如 果 页 面 篇 幅 很 长 ， 要 不 断 地 拖 动 滚动 条 ， 给 浏览 带 来 不 便 ， 想 要 
浏览 者 既 可 以 从 头 阅 读 到 尾 ， 又 可 以 很 快 寻找 到 自己 感 兴趣 的 特定 内 容 进行 部 分 阅读 ， 这 时 就 
可 以 通过 ”链接 来 实现 。 

二 、 操 作 题 
给 图 4-24 所 示 的 网 页 添加 链接 。 


区 能 环保 


er 


图 4-24 图 像 的 热 区 链接 
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@ 为 了 把 Internet 上 众多 的 网 站 和 网 页 联系 起 来 ， 构 成 一 个 整体 ， 就 要 
在 网 页 中 加 入 链接 ， 通 过 单 击 网 页 上 的 链接 才能 找到 自己 所 需 的 信息 。 正 是 因为 有 了 网 页 之 间 
的 链接 ， 才 形成 了 这 纷繁 复杂 的 网 络 世界 。 本 课 的 重点 是 掌握 超 链 接 标 记 ， 链 接 元 素 <a>、 创 
建 图 像 的 超 链接 、 创 建 锚 点 链接 等 ， 最 后 通过 综合 实例 讲述 了 超 链接 特殊 效果 的 创建 。 
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第 5 课 
使 用 HTML 创 建 强大 的 表格 


本 课 导读 
表格 是 网 页 制作 中 使 用 最 多 的 工具 之 一 ， 在 制作 网 页 时 ， 使 用 表格 可 
以 更 清晰 地 排列 数据 。 但 在 实际 制作 过 程 中 ， 表 格 更 多 地 用 在 网 页 布局 定 
位 上 。 很 多 网 页 都 是 以 表格 布局 的 ， 这 是 因为 表格 在 文本 和 图 像 的 位 置 控 
制 方面 都 有 很 强 的 功能 。 灵 活 、 熟 练 地 使 用 表格 ， 在 网 页 制作 时 会 有 如 虎 
添 翼 的 感觉 。 


技术 要 点 
创建 并 设置 表格 属性 
表格 的 结构 标记 
综合 实例 一 使 用 表格 排 
版 网 页 实例 展示 


水 即 大 酒店 


细 线 表格 使 用 表格 排列 网 页 
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2. | 创建 并 设置 表格 属性 


行 、 列 和 单元 格 3 部 分 组 成 。 使 用 表格 可 以 排列 页 面 中 的 文 
图 像 及 各 种 对 象 。 de te 列 则 是 上 下 方式 的 ， 单 元 格 是 行 和 列 交汇 的 部 分 
是 输入 信息 的 地 方 。 
| 5.1.1 课堂 小 实例 一 一 表格 的 基本 标记 (table、tr、td) 
表格 由 行 、 列 和 单元 格 3 部 分 组 成 ， 一 般 | 攻关 和 网 全 于 
通过 3 个 标记 来 创建 ， 分 别 是 表格 标记 table、 </tr> 


行 标记 tt 和 单元 格 标记 td。 表格 的 各 种 属性 都 <tr> 
要 在 表格 的 开始 标记 <table> 和 表格 的 结束 标 : <td> 第 2 行 第 1 列 单元 格 </td><td> 第 2 行 第 2 列 单元 格 </td> 


记 </table> 之 间 才 有 效 。 :</> 

太行 : 表格 中 的 水 平 间 隔 。 : SA 

太 列 : 表格 中 的 垂直 间隔 。 | Y 
</html> 


友 ”单元 格 :表格 中 行 与 列 相交 所 产生 的 区 域 。 


在 代码 中 加 粗 部 分 的 代码 标记 是 表格 的 


基本 语法 : 
本 : 基本 构成 ， 在 浏览 器 中 预览 ， 可 以 看 到 在 网 
ee | 页 中 添加 了 一 个 2 行 2 列 的 表格 ， 表 格 没有 边 
<td> 单 元 格 内 的 文字 </ta> | 框 ， 如 图 5-1 所 示 。 
<td> 单 元 格 内 的 文字 </td> ! 一 | 
</tr> 
<tr> 
<td> 单 元 格 内 的 文字 </td> 
<td> 单 元 格 内 的 文字 </td> 
< 
</table> 

语法 说 明 : 

<table> 标 记 和 </table> 标 记分 别 表示 表格 ; | Se 
的 开始 和 结束 ， 而 <t> 和 </tr> 则 分 别 表示 行 的 图 5-1 表格 的 基本 构成 效果 
开始 和 结束 ， 在 表格 中 包含 几 组 <t>…</t> 就 在 制作 网 页 的 过 程 中 ， 一 般 都 使 用 表格 


表示 该 表格 为 几 行 ，<td> 和 </td> 表 示 单元 格 ， 来 控制 网 页 的 布局 ， 如 图 5-2 所 示 。 
的 起 始 和 结束 。 | 

实例 代码 : 
<!doctype html> 
<html> 
<meta charset="utf-8"> 
<head> 
<title> 表 格 的 基本 标记 </title> 
</head> 
<body> 
<table border="1"> 


<tr> 


图 5-2 使 用 表格 来 控制 网 页 的 布局 


yx 
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用 5.1.2 课堂 小 实例 一 一 表格 宽度 和 高 度 (width、height) 一 一 
width 标 签 用 来 设置 表格 的 宽度 ，height 标 签 | 
用 来 设置 表格 的 高 度 ， 以 像素 或 百分比 为 单位 。 


基本 语法 ; | 
<taple wiath-" 表 格 完 度 ”height-" 表 格 高度 "> 。 ， 

语法 说 明 : | 

表格 高 度 和 表格 宽度 值 可 以 是 像素 , 也 | ， 在 代码 中 加 粗 部 分 的 代码 标记 
可 以 为 百分比 ， 如 果 设 计 者 不 指定 ， 则 默认 ， “width- "650" height-"240"” 是 设置 表格 的 宽 
pa ， 度 为 650 像 素 ， 高 度 设置 为 240 像 素 ， 在 浏览 


实例 代码 ， 器 中 预览 ， 可 以 看 到 效果 如 图 5-3 所 示 。 


i 
(9) prtrcss 5LZ\ 胡 首 宙 度 和 高 朗 h 散记 一 吕 X Ee 
全 3 x 
HH RD EBV Gas/ IRM Wo 
i 
1 | 村 : 行 第 ! 列 单元 格 第 : 行 第 2 列 单 元 格 
Hl 
第 2 行 第 1 列 单元 格 第 ? 行 第 2 列 单元 格 
下 Aioos 。 | 
1 话 
图 5-3 表格 的 宽 和 高 


且 5.1.3 ”课堂 小 实例 一 表格 的 标题 〈caption) 一 一 一 一 一 
<caption> 标 签 可 以 为 表格 提供 一 个 简短 | 

的 说 明 ， 和 图 像 的 说 明 比 较 类 似 。 默 认 情况 ; 

下 ， 大 部 分 可 视 化 浏览 器 显示 表格 标题 在 表 ; 

格 的 上 方 中 央 。 | 
基本 语法 : 


实例 代码 : 
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: 语法 说 明 : 
| 太 ”<th>:， 表示 头 标记 ， 包 含 在 <tr> 标 记 中 。 
i 女 在 表格 中 ， 只 要 把 标记 <td> 改 为 <th> 就 可 
以 实现 表格 的 表 头 。 

实例 代码 : 


在 代码 中 加 家 部 分 的 标记 为 设置 表格 的 | 
标题 为 “人 才 招聘 ”， 在 浏览 器 中 预览 
以 看 到 表格 的 标题 ， 如 图 5-4 所 示 。 


图 5-4 表格 的 标题 


用 5.1.4 ”课堂 小 实例 一 -表格 ; 
的 表 头 (th) 一 一 2 | 
表 头 是 指 表格 的 第 一 行 或 第 一 列 等 对 表 
格 内 容 的 说 明 ， 文 字样 式 居中 、 加 粗 显示 ， 
通过 <th> 标 记 实 现 。 
基本 语法 : 


由 课堂 实录 ~ ® 
”的 表 头 效果 ， 如 图 5-5 所 示 。 


在 代码 中 加 家 部 分 的 代码 标记 为 设置 表 ， L as 
格 的 表 头 ， 在 浏览 器 中 预览 ， 可 以 看 到 表格 | 图 5.5 表格 的 表 类 效果 


肝 5.1.5 课堂 小 实例 一 一 表格 对 齐 方 式 (align) 一 一 一 一 一 一 0 
可 以 使 用 表格 的 align 属 性 来 设置 表格 的 | 


对 齐 方式 。 
align 的 参数 取 值 如 表 5-1 所 示 。 
整个 表格 在 浏览 器 页 面 中 居中 对 齐 


基本 语法 : 
表 5-1 align 参 数 取 值 
整个 表格 在 浏览 器 页 面 中 右 对 齐 
i 


| 

| 

| 

| 

| 

| 
aaa 
| 

= | 
二 : 

本 个 ! 

| 

| 

- | 
| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 


语法 说 明 : 


整个 表格 在 浏览 器 页 面 中 左 对 齐 


在 代码 中 加 粗 部 分 的 标记 和 名 
设置 表格 的 对 齐 方式 ， 在 浏览 器 中 预览 ， 可 以 
， 看 到 表格 为 右 对 齐 ， 如 图 5- ey 


@ oo 


ES | 


图 5-6 ”表格 的 右 对 齐 效果 


表格 的 基本 属性 在 网 页 制作 的 过 程 中 应 用 是 


非常 广泛 的 ， 图 5-7 所 示 为 使 用 表格 排列 文字 。 


Ee 
上 。 虽然 整个 表格 在 浏览 器 页 面 范围 内 居中 对 上 | 
目 齐 ， 但 是 表格 里 单元 格 的 对 齐 方式 并 不 会 因此 而 上. 
上 改变。 如 果 要 改变 单元 格 的 对 齐 方式 ， 就 需要 在 
上 1 行 、 列 或 单元 格 内 另行 定义 。 | 


虽 5.1.6 表格 的 边框 宽度 (border) 
可 以 通过 表格 添加 border 属 性 ， 来 实现 | 

为 表格 设置 边框 线 及 美化 表格 的 目的 。 默 认 ， 

情况 下 如 果 不 指定 border 属 性 ， 表 格 的 边框 为 ， 


0， 则 浏览 器 将 不 显示 表格 边框 。 
基本 语法 : 
<table border=" 边 框 宽度 "> 


语法 说 明 : 


为 像素 。 
实例 代码 : 
<!doctype html> 
<html> 
<meta charset="utf-8"> 
<head> 
<title> 表 格 的 边框 宽度 </title> 
</head> 
<body> 


<table width="700" height="150" align="center"> 


<caption> 
人 才 招 聘 
</caption> 


二 人 > 


通过 border 属 性 定义 边框 线 的 宽度 ， 单 位 | 


使 用 HTML 创建 强大 的 表格 


-= 


图 5-7 使 用 表格 排列 文字 


<th> 招 聘 人 数 </th> 
<th> 性 别 </th> 
<th> 年 龄 </th> 
<th> 学 历 </th> 
<th> 专 业 </th> 
<th> 薪 金 </th> 
</tr> 
<tr> 
<td>6</td> 
<td> 男 女 不 限 </td> 
<td> 不 限 </td> 
<td> 大 专 </td> 
<td> 市 场 营销 </td> 
<td>2500+ 提 成 </td> 
</tr> 
a 
<td>7</td> 
<td> 男 女 不 限 </td> 
<td> 不 限 </td> 
<td> 大 专 </td> 
<td> 室 内 设计 </td> 
<td> 面 议 </td> 
</tr> 


“te 


me Ea 
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由 课堂 实录 “~e® 


在 代码 中 加 粗 部 分 的 标记 “border="2"” 国 00 团 入 区 邮 逢 汪 民 六条 


为 设置 表格 的 边框 宽度 ， 在 浏览 器 中 预览 ， | 
可 以 看 到 将 表格 边框 训 度 设置 为 2 像素 的 效 
果 ， 如 图 5-8 所 示 。 | 


旧 5.1.7 ”表格 边框 颜色 〈bordercolor) 一 一 一 一 一 一 一 一 一 一 0 


为 了 美化 表格 ， 能 为 表格 设 定 不 同 的 边 : 
框 颜色 。 默 认 情 况 下 边框 的 颜色 是 灰色 的 ， | 
可 以 使 用 bordercolor 设 置 边框 颜色 。 但 是 设置 | 
边框 颜色 的 前 提 是 边框 的 宽度 不 能 为 0%， 否 则 ; 
无 法 显示 出 边框 的 颜色 。 | 

基本 语法 : 


语法 说 明 : 


定义 颜色 的 时 候 ， 可 以 使 用 英文 颜色 名 | 。 在 代码 中 加 租 部 分 的 代码 标记 
; “bordercolor="#009900"” 是 设置 表格 边框 的 


称 或 十 六 进 制 颜色 值 。 | 
; 颜色 ， 在 浏览 器 中 预览 ， 可 以 看 到 边框 颜色 


实例 代码 : | 的 效果 ， 如 图 5-9 所 示 。 


Er 


图 5-9 表格 边框 颜色 效果 
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@ oo 第 课 NE 


月 5.1.8 单元 格 间 距 (cellspacing) 一 一 一 一 一 一 一 一 一 一 0 
表格 的 单元 格 和 单元 格 之 间 ， 可 以 设置 一 定 的 距离 ， 这 样 可 以 使 表格 显得 不 会 过 于 紧凑 。 
基本 语法 : 


语法 说 明 : 
单元 格 的 间距 以 像素 为 单位 ， 默 认 值 是 2。 
实例 代码 : 


在 代码 中 加 粗 部 分 的 代码 标记 “cellspacing-"10"” 设 置 单元 格 的 间距 ， 在 浏览 器 中 预览 ， 
可 以 看 到 单元 格 的 间距 为 10 像 素 的 效果 ， 如 图 5-10 所 示 。 


ee 


图 5-10 单元 格 间距 效果 


月 5.1.9 单元 格 边 距 (cellpadding) 一 一 一 一 一 一 一 一 一 一 一 0 


在 默认 情况 下 ， 单 元 格 里 的 内 容 会 紧 贴 着 表格 的 边框 ， 这 样 看 上 去 非常 拥挤 。 可 以 使 用 
cellpadding 来 设置 单元 格 边框 与 单元 格 里 的 内 容 之 间 的 距离 。 
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课堂 买 录 
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基本 语法 : 
<table cellpadding=" 文 字 与 边框 距离 值 "> 
语法 说 明 : 


实例 代码 : 
<!ldoctype html> 
<html> 
<meta charset="utf-8"> 
<head> 
<title> 单 元 格 边 距 </title> 
</head> 
<body> 


单元 格 里 的 内 容 与 边框 的 距离 以 像素 为 单位 ， 一 般 可 以 根据 需 


设置 ， 但 是 不 能 过 大 。 


<table width="500"” border="1" bordercolor="#FF0000" cellpadding="10"> 


全 
<td> 单 元 格 1</td><td> 单 元 格 2</td> 
</tr> 
<tr> 
<td> 单 元 格 3</td><td> 单 元 格 4</td> 
</tr> 
</table> 
</body> 
</html> 


在 代码 中 加 粗 部 分 的 代码 标记 
“cellpadding="10"” 设 置 单元 格 边 距 ， 在 浏 
览 器 中 预览 ， 可 以 看 到 文字 与 边框 的 距离 效 
果 ， 如 图 5-11 所 示 。 

在 制作 网 页 的 同时 ， 对 表格 的 边框 进行 
相应 的 设置 ， 可 以 很 容易 地 制作 出 一 些 细 线 
的 表格 ， 图 5-12 所 示 为 细 线 表格 。 


-a <) 


TO 加 


品 


口 


图 5-11 单元 格 边 距 效 果 


图 5-12 


细 线 表格 的 效果 


@ oo 第 5 课 EME 


5.1.10 ”表格 的 背景 色 (bgcolor) 

表格 的 背景 颜色 属性 bgcolor 是 针对 整个 表格 的 ，bgcolor 定 义 的 颜色 可 以 被 行 、 列 或 单元 格 
定义 的 背景 颜色 所 覆盖 

基本 语法 : 
<table bgcolor=" 背 景 颜色 "> 

语法 解释 : 

定义 颜色 的 时 候 ， 可 以 使 用 英文 颜色 名 称 或 十 六 进 制 颜色 值 表 现 。 

实例 代码 : 


<!doctype html> 


<html> 
<meta charset="utf-8"> 
<head> 
<title> 表 格 的 背景 色 </title> 
</head> 
<body> 
<table width="500" border="l"cellpadding="10" cellspacing="10" 
bordercolor="#FF0000" bgcolor="#FFFFO00"> 
<tr> 
<td> 单 元 格 1</td> 
<td> 单 元 格 2</td> 
</tr> 
<tr> 
<td> 单 元 格 3</td> 
<td> 单 元 格 4</td> 
</tr> 
</table> 
</body> 
</html> 


在 代码 中 加 粗 部 分 的 代码 标记 ;35-14 所 示 的 表格 就 使 用 背景 颜色 。 
“bgcolor="#FFFF00"” 为 设置 表格 的 背景 颜 | 
色 ， 在 浏览 器 中 预览 ， 可 以 看 到 表格 设置 了 ; 
黄色 的 背景 ， 如 图 5-13 所 示 。 


a | 

ET 3 
: re 

图 5-13 设置 表格 背景 颜色 效果 : 

表格 背景 颜色 在 网 页 中 也 比较 常见 ,图 ; 


图 5-14 表格 使 用 了 背景 颜色 
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课堂 实录 
表格 的 背景 图 像 (background ) 
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S111 


ee 一 个 


除了 可 以 为 表格 设置 背景 颜色 之 外 ， 还 可 以 为 表格 设置 更 加 美观 的 背景 图 像 。 
基本 语法 : 
<table background=" 背 景 图 像 地 址 ”> 
语法 说 明 : 
背景 图 像 的 地 址 可 以 为 相对 地 址 ， 也 可 以 为 绝对 地 址 。 
实例 代码 : 


<!doctype html> 


<html> 
<meta chars 


<head> 


et="utf-8"> 


<title> 表 格 的 背景 图 像 </title> 


</head> 
<body> 


<table width ="500" border="]l"cellpadding="10" cellspacing="10" 
bordercolor="#FF0000" background="images/bg4.gif"> 


RER> 


<td> 单 元 格 1</td> 
<td> 单 元 格 2</td> 


</tr> 
<Etr> 


<td> 单 元 格 3</td> 
<td> 单 元 格 4</td> 


</tr> 
</table> 
</body> 
</html> 


在 代码 中 加 粗 部 分 的 代码 标记 
“background="images/bg4.gif'” 为 设置 表格 


的 背景 图 像 ， 在 浏览 器 中 预览 ， 可 以 看 到 表 


格 设置 了 背景 图 像 的 效果 ， 如 图 


5-15 所 示 。 


sa 


| 
| 


图 5-15 设置 表格 的 背景 图 


像 效 果 


在 网 页 
所 示 。 


ph 常设 置 表格 的 背景 


到 像 ， 如 图 5$-16 


CT 


在 线 看 房 bb 
ZRIIANEANEANG 


曲 位 之 赴 一 -田园 城市 花园 


Eee 人 
太太 站 丙 ， 通 风 示 人 办 们 到 好 处 ， 下 于 市 天 亲信: 


图 5-16 表格 的 背景 图 像 


@ oo 第 5 识 EMT 
表格 的 结构 标记 “一 


@ 为 了 在 源 代 码 中 清楚 地 区 分 表格 结构 ，HTMEL 语 言 中 规定 了 
<thead>、<tdoby> 和 <tfoot>3 个 标记 ， 分 别 对 应 于 表格 的 表 头 、 表 主体 和 表 尾 。 


用 5.2.1 课堂 小 实例 一 一 设计 表 头 样式 (thead) 一 一 一 一 一 
表 首 样式 的 开始 标记 是 <thead>， 结 束 标 : 

记 是 </thead>。 它 们 用 于 定义 表格 最 上 端 表 | 

首 的 样式 ， 可 以 设置 背景 颜色 、 文 字 对 齐 方 ; 

式 、 文 字 的 垂直 对 齐 方式 等 。 | 
基本 语法 : 


语法 说 明 : | 
在 该 语法 中 ，bgcolor、align、valign 的 取 | 

值 范围 与 单元 格 中 的 设置 方法 相同 。 在 <thead> 

标记 内 还 可 以 包含 <td>、<th> 和 <tr> 标 记 ,而 | 

一 个 表 元 素 中 只 能 有 一 个 <thead> 标 记 。 | 
实例 代码 : 


| 在 代码 中 加 粗 部 分 的 “<thead></ 
| thead> ”代码 之 间 为 设置 表格 的 表 头 ， 在 浏览 
览 效果 ， 如 图 5-17 所 示 。 


ET] 


CROnSZHVRH 吉 xi 式 hm 团 D- Ox 


/公斤 
吾 ， 元 二 俐 得 四 民主 御 肌 逐 市场 利 贷 。 


图 5-17 设置 表格 的 表 头 
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课堂 实录 ~“e® 
国 5.2.2 课堂 小 实例 一 一 设计 表 主 体 样式 (tbody) 一 一 一 一 
与 表 首 样式 的 标记 功能 类 似 ， 表 主体 样 | 
式 用 于 统一 设计 表 主体 部 分 的 样式 ， 标 记 为 ， 
<tbody>。 | 


基本 语法 : 


语法 说 明 : : 
在 该 语法 中 ，bgcolor、align、valign 的 取 
值 范 围 与 <thead> 标 记 中 的 相同 。 一 个 表 元 素 | 
中 只 能 有 一 个 <tbody> 标 记 。 | 


实例 代码 : 


| 在 代码 中 加 粗 部 分 的 代码 标记 为 设置 表 
| 格 的 表 主体 ， 在 浏览 器 中 预览 效果 ， 如 图 5-18 
| 所 示 。 


| 图 5-18 设置 表格 的 表 主 体 的 效果 
中 5.2.3 ”课堂 小 实例 一 -设计 
| 表 尾 样式 (tfoot) 一 


<tfoot> 标 签 用 于 定义 表 尾 样式 。 
基本 语法 : 
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语法 说 明 : 

在 该 语法 中 ，bgcolor、align、valign 的 取 值 范 围 与 <thead> 标 签 中 的 相同 。 一 个 表 元 素 中 只 
能 有 个 <tfoot> 标 签 。 

实例 代码 : 


| 在 代码 中 加 粗 部 分 的 代码 标记 为 设置 表 尾 
; 样式 ， 在 浏览 器 中 预览 效果 ， 如 图 5-19 所 示 。 


图 5-19 设置 表 尾 样式 效果 


和 和 加 识 堂 实录 “~e® 
D5, 3 综合 实例 一 一 使 用 表格 排版 网 页 


表格 在 网 页 版 面 布 局 中 发 挥 着 非常 重要 的 作用 ， 网 页 中 的 很 多 元 素 都 
需要 表格 来 排列 。 本 课 主 要 讲述 了 表格 的 常用 标签 ， 下 面 就 通过 实例 讲述 表格 在 整个 网 页 排版 
布局 方面 的 综合 运用 。 

团 打开 Dreamweaver CC， 新 建 一 空白 文档 , 
如 图 5-20 所 示 。 


图 5-20 新建 文档 


打开 代码 视图 ， 将 光标 置 于 相应 的 位 置 ， 输 入 如 下 代码 ， 插 入 3 行 1 列 的 表格 。 此 表格 记 为 表格 
1， 如 图 5-21 所 示 。 


图 5-21 插入 表格 1 


@ -ee 第 5 课 EME 


在 表格 1 的 第 1 行 单元 格 中 输入 以 下 代码 ， 如 图 5-22 所 示 。 


DW =mn me sam EN a wr0) ec = SW Ra - tollel =] 
em 
Ht 可 | 
CR J EE 
Us ~ ”BE 
We ET em 
h = a 
| Pp 
机 
CR 加 而 Sr 
图 5-22 输入 内 容 


园 将 光标 置 于 表格 1 的 第 2 行 单元 格 中 ， 输 入 以 下 代码 ， 插 入 1 行 2 列 的 表格 ， 此 表格 记 为 表格 2， 
如 图 5-23 所 示 。 


图 5-23 插入 表格 2 
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| 同 课堂 实录 


园 将 光标 置 于 表格 2 的 第 1 列 单元 格 中 ， 输 入 相应 的 内 容 ， 如 图 2-24 所 示 。 


图 5-24 输入 内 容 
园 将 光标 置 于 表格 2 的 第 2 列 单元 格 中 ， 输 入 以 下 相应 的 内 容 ， 如 图 5-25 所 示 。 


园 将 光标 置 于 表格 1 的 第 3 行 单元 格 中 ， 输 入 以 下 代码 内 容 ， 如 图 5-26 所 示 。 


园 保存 文档 ， 按 <F12> 键 在 浏览 器 中 预览 ， 效 果 如 图 5-27 所 示 。 


@ oo 第 5 课 BME 


DW za sed Sem SAN EM DO eso SA EM RH ww- Bh ollel =] 


国 cssx 


Pe 
a 
i 


| 入 避让 声 各 用 


图 5-25 输入 内 容 


DW zn® mm sem EM emM weio) ed wn SW me mw- WD ol-lel*] 
ee 
ET 图 <s ara 
me ar 
9 Me 同 waeer powor 
机 ee 
a 训 琴 
是 
日 EE 
BJ Ed 
ngs 
| E Lr 
卫 ja 
可 am 
加 己 
lm 


要 了 工人 


Get tte or qos 


图 5-26 输入 内 容 
水 邑 大 酒店 


Nm | Wea | EER | Gag | dns | A Dm | A RE) 
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图 5-27 利用 表格 排版 网 页 效果 
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2 司 课堂 实录 


5 /A MEE 


一 、 填 空 题 

(1) 表格 由 、 和 3 部 分 组 成 ， 一 般 通 过 3 个 标记 
来 创建 ， 分 别 是 表格 标记 Ss 

(2) 标签 可 以 为 表格 提供 一 个 简短 的 说 明 ， 和 图 像 的 说 明 比较 类 似 。 默认 


情况 下 ， 大 部 分 可 视 化 浏览 器 显示 表格 标题 在 表格 的 上 方 中 央 。 


(3) 为 了 在 源 代码 中 清楚 地 区 分 表格 结构 ，HTML 语 言 中 规定 了 
和 3 个 标记 ， 分 别 对 应 于 表格 的 表 头 、 表 主体 和 表 尾 。 

二 、 选 择 题 

(1) 为 了 美化 表格 ， 能 为 表格 设 定 不 同 的 边框 颜色 。 上 默认 情况 下 边框 的 颜色 是 灰色 的 ， 
可 以 使 用 设置 边框 颜色 。 

A. bordercolor B. border C. background 

(2) 表 首 样式 的 开始 标记 是 ， 结 束 标记 是 。 它 们 用 于 定义 表格 
最 上 端 表 首 的 样式 ， 可 以 设置 背景 颜色 、 文 字 对 齐 方式 、 文 字 的 垂直 对 齐 方式 等 。 

A. <tbody> </tbody> B. <thead>、</thead> C. <tfoot></tfoot> 
三 、 操 作 是 


创建 利用 表格 排版 网 页 效果 如 图 5-28 所 示 。 


图 5-28 利用 表格 排版 网 页 效果 


@ 表格 是 网 页 设计 制作 时 不 可 缺少 的 重要 元 素 。 无 论 用 于 排列 数据 还 是 
在 页 面 上 对 文本 进行 排版 ， 表 格 都 表现 出 了 强大 的 功能 。 本 课 主要 介绍 创建 并 设置 表格 属性 、 
表格 的 结构 标记 和 使 用 表格 排版 网 页 的 使 用 。 通 过 对 本 课 的 学 习 ， 使 读者 能 够 合理 地 利用 表格 
来 排列 数据 ， 从 而 设计 出 版 式 漂亮 的 网 页 ， 有 助 于 协调 页 面 结 构 的 均衡 。 
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第 6 课 
创建 交换 式 表单 


本 课 导读 

表单 的 用 途 很 多 ， 在 制作 网 页 时 ， 特 别 是 制作 动态 网 页 时 
常常 会 用 到 ， 表 单 的 作用 就 是 收集 用 户 的 信息 ， 将 其 提交 到 服务 
器 ， 从 而 实现 与 客户 的 交互 ， 它 是 HTML 页面 与 浏览 器 端 实现 交 
互 的 重要 手段 。 


技术 要 点 
表单 元 素 
表单 的 控件 
综合 实战 一 -用 户 注册 给 您 的 带 来 滁 软 温馨 
表单 页 面 实例 更 jn 丰富 的 色彩 和 关 乞 
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| 同 课堂 实录 


表单 元 素 <form>> o 
e@ 在 网 页 中 <form></form> 标 记 对 用 来 创建 一 个 表单 ， 即 定义 表单 的 开 


始 和 结束 位 置 ， 在 标记 对 之 间 的 一 切 都 属于 表单 的 内 容 。 在 表单 的 <form> 标 记 中 ， 可 以 设置 
表单 的 基本 属性 ， 包 括 表单 的 名 称 、 处 理 程序 和 传送 方法 等 。 一 般 情况 下 ， 表 单 的 处 理 程序 
action 和 传送 方法 method 是 必 不 可 少 的 参数 。 
有 旧 6.1.1 “课堂 小 实例 一 一 动作 属性 〈action) 一 一 一 一 一 一 一 0 
action 用 于 指定 表单 数据 提交 到 哪个 地 址 进行 处 理 。 
基本 语法 : 


语法 说 明 : 

表单 的 处 理 程序 是 表单 要 提交 的 地 址 ， 也 就 是 表单 中 收集 到 的 资料 将 要 传递 的 程序 地 址 。 
这 一 地 址 可 以 是 绝对 地 址 ， 也 可 以 是 相对 地 址 ， 还 可 以 是 一 些 其 他 形式 的 地 址 。 

实例 代码 : 


在 代码 中 加 粗 部 分 的 标记 action 是 程序 提交 标记 ， 这 里 将 表单 提交 到 电子 邮件 。 
全 6.1.2 课堂 小 实例 一 发送 数据 方式 属性 (method) 一 一 一 


表单 的 method 属 性 用 于 指定 在 数据 提交 到 服务 器 的 时 候 使 用 哪 种 HTTP 提 交 方 法 ， 可 取 值 
为 get 或 post。 
基本 语法 : 


语法 说 明 : 

传送 方法 的 值 只 有 两 种 ， 即 get 和 post。 

get: 表单 数据 被 传送 到 action 属 性 指定 的 URL， 然 后 这 个 新 URL 被 送 到 处 理 程序 上 。 
post: 表单 数据 被 包含 在 表单 主体 中 ， 然 后 被 送 到 处 理 程序 上 。 


@_。 第 识 加 二 于 时 
实例 代码 : 


在 代码 中 加 粗 部 分 的 代码 标记 “method-"post"” 是 传送 方法 。 
有 6.1.3 课堂 小 实例 一 名称 属性 (name) 一 一 一 一 一 一 
name 用 于 给 表单 命名 ， 这 一 属性 不 是 表单 的 必要 属性 ， 但 是 为 了 防止 表单 提交 到 后 台 处 理 
程序 时 出 现 混乱 ， 一 般 需要 给 表单 命名 。 
基本 语法 : 


语法 说 明 : 
表单 名 称 中 不 能 包含 特殊 字符 和 空格 。 
实例 代码 : 


在 代码 中 加 粗 部 分 的 标记 “name="form1"” 是 表单 名 称 标记 。 


7 表单 的 控件 <input> 


在 网 页 中 插入 的 表单 对 象 包括 文本 字段 、 复 选 框 、 单 选 按钮 、 提 交 按 
钮 、 重 置 按钮 和 图 像 域 等 。 在 HTML 表 单 中 ，input 标 记 是 最 常用 的 表单 标记 ， 包 括 常 见 的 文本 
字段 和 按钮 都 采用 这 个 标记 。 
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基本 语法 : 


在 该 语法 中 ，name 是 为 了 便于 程序 对 不 同 表单 对 象 的 区 分 ，type 则 是 确定 了 这 一 个 表单 对 
象 的 类 型 。type 所 包含 的 属性 值 如 表 6-1 所 示 。 
表 6-1 type 所 包含 的 属性 值 

属性 值 说 “ 明 
text 文本 字段 
密码 域 
radio 单 选 按钮 
checkbox 复 选 框 


password 


button 普通 按钮 
submit 提交 按钮 
Teset 重 置 按钮 
image 图 像 域 
hidden 隐藏 域 


file 文件 域 


上 6.2.1 课堂 小 实例 一 文本 域 text 
text 标 记 用 来 设置 表单 中 的 单行 文本 框 ， 在 其 中 可 输入 任何 类 型 的 文本 、 数 字 或 字母 ， 输 
入 的 内 容 以 单行 显示 。 
基本 语法 : 


语法 说 明 : 
在 该 语法 中 包含 了 很 多 参数 ， 它 们 的 含义 和 取 值 方法 不 同 ， 如 表 6-2 所 示 。 
表 6-2 文本 字段 text 的 参数 值 


属性 值 


ee 文字 字段 的 名 称 ， 用 于 和 页 面 中 其 他 控件 加 以 区 别 。 名 称 由 英文 或 数字 及 下 划 线 组 
成 ， 但 有 大 小 写 之 分 

type 指定 插入 哪 种 表单 对 象 ， 如 type = "text"， 即 为 文字 字段 

value 设置 文本 框 的 默认 值 

size 确定 文本 字段 在 页 面 中 显示 的 长 度 ， 以 字符 为 单位 

maxlength 设置 文本 字段 中 最 多 可 以 输入 的 字符 数 


建 父 换 式 表单 


在 代码 中 加 粗 的 “<input name="textfield" 
type="text" size="25" maxlength="20">” 标 记 
将 文本 域 的 名 称 设 置 为 textfield， 长 度 设置 为 
25， 最 多 字符 数 设置 为 20， 在 浏览 器 中 浏览 
效果 ， 如 图 6-1 所 示 。 


图 6-1 设置 文字 字段 


肯 6.2.2 课堂 小 实例 一 一 密码 区 域 passWord 一 一 一 一 一 一 一 一 0 
在 表单 中 还 有 一 种 文本 字段 的 形式 一 一 密码 域 ， 输 入 到 其 中 的 文字 均 以 星 号 “*” 或 圆 点 
“@” 显 示 。 
基本 语法 : 


语法 说 明 : 
在 该 语法 中 包含 了 很 多 参数 ， 它 们 的 含义 和 取 值 方法 不 同 ， 如 表 6-3 所 示 。 
表 6-3 ”密码 域 password 的 参数 值 


密码 域 的 名 称 ， 用 于 和 页 面 中 其 他 控件 加 以 区 别 。 名 称 由 英文 或 数字 及 下 
划 线 组 成 ， 但 有 大 小 写 之 分 

指定 插入 哪 种 表单 对 象 

用 来 定义 密码 域 的 默认 值 ， 以 “*” 或 “@” 显 示 

确定 密码 域 在 页 面 中 显示 的 长 度 ， 以 字符 为 单位 

设置 密码 域 中 最 多 可 以 输入 的 文字 数 


ET 课堂 实录 


在 代码 中 加 粗 的 “<input name"password" 
type="password" size="18" maxlength="20">” 标 
记 将 密码 域 的 名 称 设置 为 password， 长 度 设置 
为 18， 最 多 字符 数 设 置 为 20， 在 浏览 器 中 浏览 
效果 ， 如 图 6-2 所 示 ， 当 在 密码 域 中 输入 内 容 
时 ,将 以 “@” 显 示 。 


图 6-2 设置 密码 域 
人 目 6.2.3 ”课堂 小 实例 一 一 提交 按钮 Submit 一 一 一 一 一 一 一 一 一 0 
提交 按钮 是 一 种 特殊 的 按钮 ， 单 击 该 类 按钮 ， 可 以 实现 表单 内 容 的 提交 。 


基本 语法 : 
语法 说 明 : 
在 该 语法 中 ，value 同 样 用 来 设置 显示 在 按钮 上 的 文字 。type="submit" 表 示 提交 按钮 。 
实例 代码 : 


在 代码 中 加 粗 的 “<input type="submit" 
name="button" value=" 提 交 "> ”标记 将 按钮 的 
名 称 设 置 为 button， 取 值 设 置 为 “提交 ”， 在 
浏览 器 中 浏览 效果 ， 如 图 6-3 所 示 。 


图 6-3 ”设置 提交 按钮 
肯 6.2.4 课堂 小 实例 一 一 复位 按钮 reset 一 一 一 一 一 一 一 一 一 一 0 
重 置 按钮 可 以 清除 用 户 在 页 面 中 输入 的 信息 ， 将 其 恢复 成 默认 的 表单 内 容 。 
基本 语法 : 
np bperreser pore ee 
语法 说 明 : 
在 该 语法 中 ，value 同 样 用 来 设置 显示 在 按钮 上 的 文字 。type="reset" 表 示 复 位 按钮 。 
实例 代码 : 
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在 代码 中 加 粗 的 “<input type="reset" 
name="button2" value=" 重 置 "> ”标记 将 按钮 
的 类 型 设置 为 reset， 取 值 设置 为 “ 重 置 ”， 
在 浏览 器 中 浏览 效果 ， 如 图 6-4 所 示 。 


图 6-4 设置 重 置 按钮 
国 6.2.5 ”课堂 小 实例 一 一 图 像 按 钮 image 一 一 一 一 一 一 一 一 
图 像 域 是 指 可 以 用 在 提交 按钮 位 置 的 图 像 ， 使 得 这 幅 图 像 具 有 按钮 的 功能 。 一 般 来 说 ， 
使 用 默认 的 按钮 形式 往往 会 让 人 觉得 单调 ， 若 网 页 使 用 了 较为 丰富 的 色彩 ， 或 者 稍微 复杂 的 设 
计 ， 再 使 用 表单 默认 的 按钮 形式 甚至 会 破坏 整体 的 美感 。 这 时 ， 可 以 使 用 图 像 域 ， 从 而 创建 和 
网 页 整体 效果 一 致 的 图 像 提 交 按钮 
基本 语法 : 


语法 说 明 : 
在 语法 中 ， 图 像 的 路 径 可 以 是 绝对 的 ， 也 可 以 是 相对 的 。 
实例 代码 : 


在 代码 中 加 粗 的 “<input type=image 
src="images/no.jpg" name=imageField>” 标 
记 将 图 像 域 的 名 称 设置 为 Image， 地 址 设置 
为 iImages/no.jpg， 在 浏览 器 中 浏览 效果 ， 如 
图 6-5 所 示 。 


图 6-5 设置 图 像 域 
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肯 6.2.6 课堂 小 实例 一 一 单 击 按钮 button 一 一 一 一 一 一 一 一 一 0 
表单 中 的 按钮 起 着 至 关 重要 的 作用 ， 它 可 以 激发 提交 表单 的 动作 ， 也 可 以 在 用 户 需要 修改 
表单 的 时 候 ， 将 表单 恢复 到 初始 的 状态 ， 还 可 以 依照 程序 的 需要 ， 发 挥 其 他 作用 。 普 通 按钮 主 
要 是 配合 JavaScirpt 脚 本 来 进行 表单 处 理 的 。 
基本 语法 : 


语法 说 明 : 


在 该 语法 中 ，value 的 取 值 就 是 显示 在 按钮 上 的 文字 ， 在 按钮 中 可 以 添加 onclick 来 实现 一 些 
特殊 的 功能 ，onclick 是 设置 当 鼠 标 按 下 按钮 时 所 进行 的 处 理 。 
实例 代码 : 


在 代码 中 ， 加 粗 的 “<input type="submit" 
name="button" value=" 关 闭 窗 口 "onclick="window. 
close0"> ”标记 将 按钮 的 取 值 设置 为 “关闭 窗 
”， 处 理 程 序 设置 为 “window.close0”， 在 
浏览 器 中 浏览 效果 ， 如 图 6-6 所 示 ， 当 单 击 “ 关 
闭 窗口 ”按钮 时 弹出 一 个 关闭 窗口 提示 框 。 


图 6-6 设置 普通 按 包 
由 6.2.7 课堂 小 实例 一 一 复 选 框 checkbox 一 一 一 一 一 一 一 一 


浏览 者 在 填写 表单 时 ， 有 一 些 内 容 可 以 通过 做 出 选择 的 形式 来 实现 。 例 如 常见 的 网 上 调 
查 ， 表 现形 式 为 首先 提出 调查 的 问题 ， 然 后 让 浏览 者 在 若干 个 选项 中 做 出 选择 。 复 选 框 能 够 实 
现 项 目的 多 项 选择 功能 ， 以 一 个 方 框 表 示 。 


基本 语法 : 

语法 说 明 : 

在 该 语法 中 ，checked 表 示 复 选 框 在 默认 情况 下 已 经 被 选中 ， 一 个 选项 中 可 以 有 多 个 复 选 框 
被 选中 。 

实例 代码 : 
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<td><input type="checkbox" name="checkbox" value="1"> 
规格 ，420g/ 瓶 
<input type="checkbox" name="checkbox2" value="2"> 


规格 :250g/ 撼 


<input type="checkbox" name="checkbox3" value="3"> 


规格 ，320g/ 抠 
<input type="checkbox" name="checkbox4"value="4"> 
规格 : 500g/ 瓶 </ta> 


</tr> 
在 代码 中 加 粗 的 “<input icheckbox4， 取 值 设置 为 4， 在 浏览 器 中 浏览 效 
name="checkbox" type="checkbox" ; 果 ， 如 图 6-7 所 示 。 


value="1" checked>” 标 记 将 复 选 框 的 名 : 
称 设置 为 checkbox， 取 值 设 置 为 1， 并 设 | 
置 为 已 勾 选 ，“<input name="checkbox2" 
type="checkbox" value="2">” 标 记 将 | 
复 选 框 的 名 称 设置 为 checkbox2， 取 值 
设置 为 2，“<input name="checkbox3" 
type="checkbox" value="3"> ”标记 将 复 选 框 
的 名 称 设 置 为 checkbox3， 取 值 设置 为 3， 


“<input name="checkbox4" type="checkbox" 


Value="4">” 标 记 将 复 选 框 的 名 称 设置 为 


图 6-7 设置 复 选 框 


人 6.2.8 课堂 小 实例 一 一 单 选 按 钮 radio 
在 网 页 中 ， 单 选 按 钮 用 来 让 浏览 者 进行 单一 选择 ， 在 页 面 中 以 圆 框 显示 。 
基本 语法 : 
<input name=" 单 选 按钮 的 名 称 ”type="radio”value=" 单 选 按钮 的 取 值 "checked/> 
语法 说 明 : 
在 该 语法 中 ，value 用 于 用 户 选 中 单 选 按钮 后 ， 传 送 到 处 理 程序 中 的 值 ，checked 表 示 这 一 
单 选 按钮 被 选中 ， 而 在 一 个 单 选 按钮 组 中 只 有 一 个 单 选 按钮 可 以 设置 为 checked。 
实例 代码 : 


<tr> <td class="style4"> 性 别 : </td> 


<td> 

<input type="radio" name="radio" value=" 龙 眼 蜂蜜 " checked> 

<span class="style4"> 龙 眼 蜂蜜 

<input type="radio" name="radio" value=" 雪 脂 莲 蜂蜜 "> 雪 脂 莲 蜂 密 </span> 
</td> 


</tr> 


在 代码 中 加 粗 的 “<input name="radio" type="radio" value=" 龙 眼 蜂 密 " checked> ”标记 
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将 单 选 按钮 的 名 称 设置 为 radio， 取 值 设 置 为 
“龙眼 蜂蜜 ”， 并 设置 为 已 勾 选 ，“<input 
type="radio" name="radio" value=" 雪 脂 莲 蜂 
窄 ">” 标 记 将 单 选 按钮 的 名 称 设置 为 radio， 
取 值 设置 为 “ 雪 脂 莲 蜂 蜜 ”， 在 浏览 器 中 浏 
览 效 果 ， 如 图 6-8 所 示 。 


图 6-8 设置 单 选 按钮 


肯 6.2.9 课堂 小 实例 一 一 隐藏 区 域 hidden 
隐藏 域 在 页 面 中 对 于 用 户 来 说 是 看 不 见 的 ， 在 表单 中 插入 隐藏 域 的 目的 在 于 收集 和 发 送信 
息 ， 以 便于 被 处 理 表 单 的 程序 所 使 用 。 发 送 表单 时 ， 隐 藏 域 的 信息 也 被 一 起 发 送 到 服务 器 。 
基本 语法 : 
语法 说 明 : 
通过 将 type 属 性 设置 为 hidden， 可 以 根据 需要 在 表单 中 使 用 任意 多 的 隐藏 域 。 
实例 代码 : 


在 代码 中 加 粗 的 “<input name="hiddenField" type="hidden" value="1">” 标 记 将 隐藏 域 的 名 称 设 
置 为 hiddenField， 取 值 设置 为 1， 在 浏览 器 中 浏览 效果 ， 如 图 6-9 所 示 。 


图 6-9 设置 隐藏 域 


@-e 第 6 课 下 于 和 


3 综合 实战 一 一 用 户 注 册 表 单 页 面 实例 
本 课 前 面 所 讲解 的 只 是 表单 的 基本 构成 标记 ， 而 表单 的 <form> 标 记 


Ne re ep 一 个 完整 的 表 

单 提交 网 页 案例 ， 对 表单 中 各 种 功能 的 控件 的 添加 方法 加 以 说 明 ， 具 体操 作 步 骤 如 下 。 

回 使 用 Dreamweaver CC 打 [ee 5 wer Em Ho pom wi 919 es em 下 
开 网 页 文档 ， 如 图 6-10 | 
所 示 。 


图 6-10 打开 网 页 文档 


园 打开 拆 分 视图 ， 在 eT ET ee 
<body> 和 </body> 之 间 相 记 es 
应 的 位 置 输入 代码 <form Er 
></form>， 插 入 表单 ， 如 上 二 
图 6-11 所 示 。 加 Fr 


加 


图 6-11 输入 代码 
因 打开 拆 分 视图 ， 在 代 [EEC 古国 OELeLz 
外 bt A UW OIROPRSSN 
本 «of Es IC = 3 EE 
码 中 输入 代码 orm 上 更 加 丰富 的 色彩 和 者 wr ee 
action=" mailto:gw163@. 轿 到 Se 
加 ME 


i 


com" ></form>”， 将 表 
单 中 收集 到 的 内 容 以 电子 
B 件 的 形式 发 送出 去 ， 如 
图 6-12 所 示 。 


图 6-12 输入 代码 
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园 打开 拆 分 视图 ， 在 代码 中 CE EEC 
输入 代码 ， 在 <form> 标 可 
记 中 输入 “method="post" 


更 加 丰富 的 名 彩 和 过 | 


" 


aas 
id="forml"” 代 码 ， 将 四 ee F 
表单 的 传送 方式 设置 为 a 
post， 各 称 设置 为 forml， 

i 加 产品 分 天 
此 时 的 代码 如 下 所 示 ， 如 司 
引 aa 

图 6-13 所 示 。 < 几 二 El 

日 i 

泗 汉 Ee 


图 6-13 输入 代码 


田 在 <form> 和 </form> a Ieee 
标记 之 间 输 入 代 ee 
码 “<table>...... </ Er 
table>”， 插 入 6 行 2 列 的 : FE 
表格 ， 将 表格 宽度 设置 为 四 ES 
85%， 填 充 设置 为 5， 如 


图 6-14 所 示 。 


ET 可 


i aa bm 
图 6-14 输入 表格 代码 


国 打开 拆 分 视图 ， 将 光标 置 
于 表格 的 第 1 行 第 1 列 单元 
格 中 ， 在 <form> 和 </form> 
之 间 相 应 的 位 置 输入 代码 
“<td > 姓名 : </td>”， 如 
图 6-15 所 示 。 


Dw xsn wen szv x pen) Wtio) ssl0 els) BOW wml 
FE Cr 


i ee Wn Wm 


EW 


A 7 aD aon ep 4 ono 7 GD oi) tie dD ET 
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图 6-15 输入 文字 


打开 拆 分 视图 ， 将 光标 置 于 
表格 的 第 1 行 第 2 列 单元 格 
中 ， 输 入 文本 域 代码 “<input 
name="textfield" type="text" 
id="textfield" size="30" 
maxlength="25">”， 插 入 文 
本 域 ， 如 图 6-16 所 示 。 


园 同样 在 表格 的 其 他 相应 的 
单元 格 中 ， 第 1 列 单元 格 
中 输入 相应 的 文字 ， 在 第 
2 列 单元 格 中 插入 文本 域 
代码 ， 如 图 6-17 所 示 。 


图 6-17 输入 其 他 的 文本 域 代码 


国 打开 拆 分 视图 ， 将 光标 置 
于 表格 的 第 4 行 第 1 列 单 
元 格 中 ， 输 入 文字 “<td> 
性 别 :， </td>”， 在 第 2 列 
单元 格 中 输入 单 选 按钮 
代码 ， 如 图 6-18 所 示 。 
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图 6-18 输入 单 选 按钮 代码 
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打开 拆 分 视图 ， 将 光标 置 
于 表格 的 第 5 行 第 1 列 单 
元 格 中 ， 输 入 文字 “ 婚 
姻 状 况 : ”， 在 第 2 列 单 
元 格 中 输入 列表 /菜单 代 
码 ， 如 图 6-19 所 示 。 
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图 6-19 输入 文本 区 域 


打开 拆 分 视图 ， 将 光标 
置 于 表格 的 第 6 行 单元 格 
中 ， 输 入 按钮 代码 ， 如 
图 6-20 所 示 。 
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图 6-20 ”插入 按钮 域 代码 


保存 文档 ， 按 <F12> 键 预览 表单 效果 ， 如 图 6-21 所 示 。 
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图 6-21 表单 效果 
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一 、 填 空 题 

(1) 在 网 页 中 3 标记 对 用 来 创建 一 个 表单 ， 即 定义 表单 的 开始 
和 结束 位 置 ， 在 标记 对 之 间 的 一 切 都 属于 表单 的 内 容 。 

(2) 表单 的 属性 用 于 指定 在 数据 提交 到 服务 器 的 时 候 使 用 哪 种 HTTP 提 交 方 
法 传送 方法 的 值 只 有 两 种 即 和 

(3) 标记 用 来 设置 表单 中 的 单行 文本 框 ， 在 其 中 可 输入 任何 类 型 的 文本 、 数 
字 或 字母 ， 输 入 的 内 容 以 单行 显示 。 
二 、 选 择 题 

(1) 表单 中 的 起 着 至 关 重 要 的 作用 ， 它 可 以 激发 提交 表单 的 动作 ， 也 可 以 在 


用 户 需要 修改 表单 的 时 候 ， 将 表单 恢复 到 初始 的 状态 ， 还 可 以 依照 程序 的 需要 ， 发 挥 其 他 的 作 
用 。 普 通 按钮 主要 是 配合 JavaScirpt 脚 本 来 进行 表单 处 理 的 。 


A. 按钮 B. 文本 区 域 C. 密码 域 
(2) 在 网 页 中 ， 用 来 让 浏览 者 进行 单一 选择 ， 在 页 面 中 以 圆 框 显示 。 
A. 隐藏 域 B. 复 选 杠 C. 单 选 按钮 
三 、 操 作 题 


创建 利用 表格 排版 网 页 效果 ， 如 图 6-22 所 示 。 
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图 6-22 表单 网 页 效果 


本 课 主 要 讲述 了 表单 元 素 和 表单 控件 。 通 过 对 本 课 的 学 习 ， 使 读者 能 


够 更 深刻 地 了 解 到 它 在 实际 中 的 应 用 ， 表 单 是 浏览 者 与 网 站 之 间 实 现 交 互 的 工具 ， 几 乎 所 有 的 


网 站 都 离 不 开 表 单 


。 表 单 可 以 把 用 户 信 息 提交 给 服务 器 ， 服 务 器 根据 表单 处 理 程序 再 将 这 些 数 


据 进 行 处 理 ， 并 反 
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人 馈 给 用 户 ， 从 而 实现 用 户 与 网 站 之 间 的 交互 。 
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第 7 课 
HTML 5 的 新 特性 


本 课 导 读 

HTML 5 是 一 种 网 络 标准 ， 相 比 现 有 的 
HTML 4.01 和 XHTML 1.0， 可 以 实现 更 强 的 页 
面 表现 性 能 ， 同 时 充分 调用 本 地 的 资源 ， 实 现 
不 输 于 App 的 功能 效果 。HTML 5 带 给 了 浏览 者 
更 好 的 视觉 冲击 ， 同 时 让 网 站 程序 员 更 好 地 与 
HTML 语 言 “ 沟 通 ”。 虽 然 现在 HTML 5 还 没有 
完善 ， 但 是 对 于 以 后 的 网 站 建设 会 起 到 更 好 的 
作用 。 


技术 要 点 
认识 HTML5 


掌握 HTML 5 的 新 特性 

掌握 HTML 5 与 HTML 4 的 区 别 
掌握 HTML 5 新 增 的 元 素 和 废 
除 的 元 素 

熟悉 新 增 的 属性 和 废除 的 属性 
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HTML 5 的 发 展 越 来 越 迈 向 成 熟 ， 很 多 的 应 用 已 经 逐渐 出 现在 日 常 
生活 中 了 ， 不 只 让 传统 网 站 上 的 互动 Flash 逐 渐 被 HTML 5 的 技术 取代 ， 更 重要 的 是 可 以 通过 
HTML 5 的 技术 来 开发 跨 平台 的 手机 软件 ， 让 许多 开发 者 感到 十 分 兴奋 。 

HIML 最 早 是 作为 显示 文档 的 手段 出 现 的 。 再 加 上 JavaScript， 它 其 实 已 经 演变 成 了 一 个 系 
统 ， 可 以 开发 搜索 引擎 、 在 线 地 图 、 邮 件 阅 读 器 等 各 种 Web 应 用 。 虽 然 设计 巧妙 的 Web 应 用 可 
以 实现 很 多 令 人 赞叹 的 功能 ， 但 开发 这 样 的 应 用 远 非 易 事 。 多 数 都 得 手动 编写 大 量 JavaScript 代 
码 ， 还 要 用 到 JavaScript 工 具 包 ， 乃 至 在 Web 服 务 器 上 运行 的 服务 器 端 Web 应 用 。 要 让 所 有 这 些 
方面 在 不 同 的 浏览 器 中 都 能 紧密 配合 不 出 差错 是 一 个 挑战 。 由 于 各 大 浏览 器 厂商 的 内 核 标准 不 
一 样 ， 使 得 Web 前 端 开 发 者 通常 在 兼容 性 问题 而 引起 的 bug 上 要 浪费 很 多 的 精力 。 

HTML 5 是 2010 年 正式 推出 来 的 ， 随 便 就 引起 了 世界 上 各 大 浏览 器 开发 商 的 极 大 热情 ， 不 
管 是 Fire Fox、chrome、IE9 等 。 那 HTML 5 为 什么 会 如 此 受 欢 迎 呢 ? 

在 新 的 HTML 5 语法 规则 当中 ， 部 分 JavaScript 代 码 将 被 HIML 5 的 新 属性 所 替代 ， 部 分 DIV 
的 布局 代码 也 将 被 HTML 5 变 为 更 加 语义 化 的 结构 标签 ， 这 使 得 网 站 前 段 的 代码 变 得 更 加 精 
炼 、 简 洁 和 清晰 ， 让 代码 的 开发 者 也 更 加 一 目 了 然 代码 所 要 表达 的 意思 。 

HTML 5 是 一 种 设计 来 组 织 Web 内 容 的 语言 ， 其 目的 是 通过 创建 一 种 标准 和 直观 的 标记 语 
言 ， 来 让 Web 设 计 和 开发 变 得 容易 起 来 。HTML 5 提供 了 各 种 切割 和 划分 页 面 的 手段 ， 允 许 你 
创建 的 切割 组 件 不 仅 能 用 来 逻辑 地 组 织 站 点 ， 而 且 能 够 赋予 网 站 聚合 的 能 力 。 这 是 HTML 5 富 
于 表现 力 的 语义 和 实用 性 美学 的 基础 ，HTML 5 赋予 设计 者 和 开发 者 各 种 层面 的 能 力 来 向 外 发 
布 各 式 各 样 的 内 容 ， 从 简单 的 文本 内 容 到 丰富 的 、 交 互 式 的 多 媒体 无 不 包括 在 内 。 如 图 7-1 所 
示 ，HTML 5 技术 用 来 实现 动画 特效 。 
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图 7-1 HTML 5 技术 用 来 实现 动画 特效 
HTML 5 提供 了 高 效 的 数据 管理 、 绘 制 、 视 频 和 音频 工具 ， 其 促进 了 Web 上 和 便携 式 设备 
的 跨 浏览 器 应 用 的 开发 。HTML 5 有 更 大 的 灵活 性 ， 支 持 开 发 非常 精彩 的 交互 式 网 站 。 它 还 引 
入 了 新 的 标签 和 增强 性 的 功能 ， 其 中 包括 一 个 优雅 的 结构 、 表 单 的 控制 、API、 多 媒体 、 数 据 
库 支持 和 显著 提升 的 处 理 速 度 等 。 图 7-2 所 示 为 HTML 5 制作 的 游戏 。 
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图 7-2 HTML 5 制作 的 游戏 

HTML 5 中 的 新 标签 都 是 高 度 关联 的 ， 标 签 封装 了 它们 的 作用 和 用 法 。HTML 的 过 去 版 本 
更 多 的 是 使 用 非 描述 性 的 标签 。 然 而 ，HTML 5 拥有 高 度 描述 性 的 、 直 观 的 标签 ， 其 提供 了 丰 
富 的 能 够 立刻 让 人 识别 出 内 容 的 内 容 标签 。 例 如 ， 被 频繁 使 用 的 <div> 标 签 已 经 有 了 两 个 增补 
进来 的 <section> 和 <article> 标 签 。<video>、<audio>、<canvas> 和 <figure> 标 签 的 增加 也 提供 了 
对 特定 类 型 内 容 更 加 精确 的 描述 。 图 7-3 所 示 为 由 HTML 5、CSS 3 和 JS 代码 所 编写 的 美观 的 网 
站 后 人 台 界 面 。 
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This is H3 Header tile 


而 7 由 HTML 5、CSS 3 和 JS 编写 的 网 站 后 台 界 面 

HIML 5 取消 了 HIML 4.01 的 一 部 分 被 CSS 取 代 的 标记 ， 提 供 了 新 的 元 素 和 属性 。 部 分 元 素 
对 于 搜索 引擎 能 够 更 好 地 索引 整理 ， 对 于 小 屏幕 的 设置 和 视 障 人 士 有 更 好 的 帮助 。HIML 5 还 
采用 了 最 新 的 表单 的 输入 对 象 ， 还 引入 了 微 数据 ， 这 一 使 用 机 器 可 以 识别 的 标签 标注 内 容 的 方 
法 ， 使 语义 Web 的 处 理 更 为 简单 。 
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/. 2) HTML 5 的 新 特性 


HTML 5 是 一 种 设计 来 组 织 Web 内 容 的 语言 ， 其 目的 是 通过 创建 一 种 

标准 和 直观 的 UI 标记 语言 ， 来 把 Web 设 计 和 开发 变 得 容易 起 来 。HTML 5 提供 了 一 些 新 的 元 素 
和 属性 ， 例 如 <nav> 和 <footer>。 除 此 之 外 ， 还 有 如 下 一 些 特点 。 
1. 取消 了 一 些 过 时 的 HTML4 标 签 

HTML 5 取消 了 一 些 纯粹 显示 效果 的 标签 ， 如 <font> 和 <center>， 它 们 已 经 被 CSS 取 代 。 
HTML 5 吸取 了 XHTML2 一 些 建议 ， 包 括 一 些 用 来 改善 文档 结构 的 功能 ， 如 新 的 HIML 标 签 
header、footer、dialog、aside、figure 等 的 使 用 ， 将 使 内 容 创 作者 更 加 容易 地 创建 文档 。 
2. 将 内 容 和 展示 分 离 

b 和 i 标签 依然 保留 ， 但 它们 的 意义 已 经 与 之 前 有 所 不 同 ， 这 些 标签 的 意义 只 是 为 了 将 一 段 
文字 标识 出 来 ， 而 不 是 为 了 设置 粗 体 或 斜体 式样 。u、font、center、strike 这 些 标签 则 被 完全 
去 掉 了 。 
3. 一 些 全 新 的 表单 输入 对 象 

HTML 5 增加 了 日 期 、URL、Email 地 址 等 表单 输入 对 象 ， 还 增加 了 对 非 拉丁 字符 的 支 
持 。HTML 5 还 引入 了 微 数据 ， 这 一 使 用 机 器 可 以 识别 的 标签 标注 内 容 的 方法 ， 使 语义 Web 的 
处 理 更 为 简单 。 总 的 来 说 ， 这 些 与 结构 有 关 的 改进 使 内 容 创 建 者 可 以 创建 更 干净 、 更 容易 管 
理 的 网 页 。 
4. 更 全 新 、 合 理 的 标签 

多 媒体 对 象 将 不 再 全 部 绑 定 在 object 或 embed 标签 中 ， 而 是 视频 有 视频 的 标签 ， 音 频 有 音 
频 的 标签 。 
5. 支持 音频 的 播放 /录音 功能 

目前 在 播放 /录制 音频 的 时 候 ， 可 能 需要 用 到 Flash、Quicktime 或 者 Java， 而 这 也 是 HTML 5 
的 功能 之 一 。 
6. 本 地 数据 库 

这 个 功能 将 内 嵌 一 个 本 地 的 SQL 数 据 库 ， 以 加 速 交 互 式 搜索 、 缓 存 以 及 索引 功能 。 同 时 ， 
那些 离线 Web 程 序 也 将 因此 获 益 菲 浅 ， 不 需要 插件 的 富 动 画 。 
7. Canvas 对 象 

Canvas 对 象 将 给 浏览 器 带 来 直接 在 上 面 绘制 矢量 图 的 能 力 ， 这 意味 着 用 户 可 以 脱离 Flash 和 
Silverlight， 直 接 在 浏览 器 中 显示 图 形 或 动画 。 
8. 支持 丰富 的 2D 图 片 

HTML 5 内 肉 了 所 有 复杂 的 二 维 图 片 类 型 。 同 目前 网 站 加 载 图 片 的 方式 相 比 ， 它 的 运行 速 
9. 支持 即时 通信 功能 

在 HTML 5 中 内 置 了 基于 Web sockets 的 即时 通信 功能 ， 一 旦 两 个 用 户 之 间 启 动 了 这 个 功 
能 ， 就 可 以 保持 顺畅 的 交流 。 

目前 ， 主 流 的 网 页 浏览 器 Firefox 5、Chrome 12 和 Safari 5 都 支持 许多 的 HTML 5 标准 ， 而 
且 目 前 最 新 版 的 IE 9 也 支持 许多 HTML 5 标准 。 
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HTML 5 是 最 新 的 HTML 标 准 ，HTML 5 语言 更 加 精简 ， 解 析 的 规则 
更 加 详细 。 在 针对 不 同 的 浏览 器 ， 即 使 语法 错误 也 可 以 显示 出 同样 的 效果 。 下 面 列 出 的 就 是 
HTML 4 和 HTML 5 之 间 主 要 的 不 同 之 处 。 


轩 7.3.1 HTML 5 的 语法 变化 


HTML 的 语法 是 在 SGML 语 言 的 基础 上 建立 起 来 的 。 但 是 SGML 语 法 非常 复杂 ， 要 开发 能 够 解 
析 SGML 语 法 的 程序 也 很 不 容易 ， 所 以 很 多 浏览 器 都 不 包含 SGML 的 分 析 器 。 因 此 ， 虽 然 HTML 基 
本 遵从 SGML 的 语法 ， 但 是 对 于 HIML 的 执行 ， 在 各 浏览 器 之 间 并 没有 一 个 统一 的 标准 。 

在 这 种 情况 下 ， 各 浏览 器 之 间 的 互 兼容 性 和 互 操作 性 在 很 大 程度 上 取决 于 网 站 或 网 络 应 用 
程序 的 开发 者 们 在 开发 上 所 做 的 共同 努力 ， 而 浏览 器 本 身 始终 是 存在 缺陷 的 。 

在 HIML 5 中 提高 Web 浏 览 器 之 间 的 兼容 性 是 它 的 一 个 很 大 的 目标 ， 为 了 确保 兼容 性 ， 就 

要 有 一 个 统一 的 标准 。 因 此 ， 在 HIML 5 中 ， 就 围绕 着 这 个 Web 标 准 ， 重 新 定义 了 一 套 在 现 有 的 

HIML 的 基础 上 修改 而 来 的 语法 ， 使 它 运行 在 各 浏览 器 时 ， 各 浏览 器 都 能 够 符合 这 个 通用 标准 。 

因为 关于 HTML 5 语法 解析 的 算法 也 都 提供 了 详细 的 记载 ， 所 以 各 Web 浏 览 器 的 供应 商 们 
可 以 把 HTML 5 分 析 器 集中 封装 在 自己 的 浏览 器 中 。 最 新 的 Firefox (默认 为 4.0 以 后 的 版 本 ) 与 
WebKit 浏 览 器 引擎 中 都 迅速 地 封装 了 供 HTML 5 使 用 的 分 析 器 。 


月 7.3.2 HTML 5 中 的 标记 方法 
下 面 我 们 来 看 看 在 HIML 5 中 的 标记 方法 。 
1. 内 容 类 型 (ContentType) 
HTML 5 的 文件 扩展 符 与 内 容 类 型 保持 不 变 。 也 就 是 说 ， 扩 展 符 仍然 为 “.HTML” 或 
“htm”， 内 容 类 型 (ContentType) 仍然 为 “texWHTML”。 
2. DOCTYPE 声 明 
DOCTYPE 声 明 是 HTML 文 件 中 必 不 可 少 的 ， 它 位 于 文件 第 一 行 。 在 HTML 4 中 ， 它 的 声明 
方法 如 下 : 


DOCTYPE 声 明 是 HTML 5 里 众多 新 特征 之 一 。 现 在 你 只 需要 写 <!IDOCTYPE HTML>， 这 就 
行 了 7。HTML 5 中 的 DOCTYPE 声 明 方法 〈 不 区 分 大 小 写 ) 如 下 : 


3. 指定 字符 编码 
在 HIML 4 中 ， 使 用 meta 元 素 的 形式 指定 文件 中 的 字符 编码 ， 如 下 所 示 : 


在 HTML 中 ， 可 以 使 用 对 元 素 直接 追加 charset 属 性 的 方式 来 指定 字符 编码 ， 如 下 所 示 : 


在 HTML 5 中 这 两 种 方法 都 可 以 使 用 ， 但 是 不 能 同时 混合 使 用 两 种 方式 。 
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中 7.3.3 ”HTML 5 语法 中 的 3 个 要 点 一 一 一 一 一 一 一 一 一 一 0 


my 


HTML 5 中 规定 的 语法 ， 在 设计 上 兼顾 了 2. 取得 boolean 值 的 属性 


与 现 有 HTML 之 间 最 大 限度 的 兼容 性 。 下 面 就 ”取得 布尔 值 (Boolean) 的 属性 ， 例 如 
来 看 看 具体 的 HTML 5 语法 。 ;disabled 和 readonly 等 ， 通 过 默认 属性 的 值 来 表 
1. 可 以 省 略 标签 的 元 素 | 达 “ 值 为 tue”。 
在 HTML 5 中 ， 有 些 元 素 可 以 省 略 标签 ， ! 此 外 ， 在 写 明 属性 值 来 表达 “ 值 为 true” 
具体 来 讲 有 以 下 3 种 情况 。 ; 时 ， 可 以 将 属性 值 设 为 属性 名 称 本 身 ， 也 可 
(1) 必须 写 明 结 束 标签 | 以 将 值 设 为 空 字符 串 。 


area、base、br、col、command、 | <!-- 以 下 的 checked 属 性 值 皆 为 true--> 
embed、 hr、 img、 input、 keygen, link、 ;| 
meta、param、source、track、wbr。 


(2) 可 以 省 略 结束 标签 
li、 dt、 dd、 p、 rt、 rp、optgroup、 | 3. 省 略 属性 的 引用 符 


option、 colgroup、 thead、 tbody、 tfoot、 tr、 | 在 HTML 4 中 设置 属性 值 时 ， 可 以 使 用 双 

fd、 了, | 引号 或 单 引号 来 引用 。 
(3) 可 以 省 略 整个 标签 | 在 HTML 5 中 ， 只 要 属性 值 不 包含 空格 、 
HTML、 head、 body、 colgroup、, tbodys | Oc» esp Gy 、wnm 、ea 、 wy 
需要 注意 的 是 ， 虽 然 这 些 元 素 可 以 省 ， 等 字符 ， 都 可 以 省 略 属性 的 引用 符 。 

略 ， 但 实际 上 却 是 隐形 存在 的 。 : 实例 如 下 : 


例如 : “<body>” 标 签 可 以 省 略 ,但 | 
在 DOM 树 上 它 是 存在 的 ， 可 以 永恒 访问 到 | 


“document'body”。 
国 7.3.4 HTML 5 与 HTML 4 在 搜索 引擎 优化 的 对 比 一 一 一 一 一 


随 着 HTML 5 的 到 来 ， 传 统 的 <div | 
的 代码 方法 现在 即将 变 成 自己 的 标签 ， 如 | 
<Header> 和 <footer>。 | 
图 7-4 所 示 为 传统 的 DIV+CSS 写 法 ， 图 7-5 | 
所 示 为 HTML 5 的 写法 。 | 


图 7-5 HTML 5 的 写法 
| ”从 图 7-4 和 图 7-5 可 以 看 出 ，HTML 5 的 代 
| 码 可 读 性 更 高 了 ， 也 更 简洁 了 ， 内 容 的 组 织 
; 相同 ， 但 每 个 元 素 有 一 个 明确 清晰 的 定义 ， 
| 搜索 引擎 也 可 以 更 容易 地 抓 取 网 页 上 的 内 
图 7-4 传统 的 DIV+CSS 写 法 i 容 。HTML 5 标准 对 于 SEO 有 什么 优势 呢 ? 


<div id="section"> 
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1. 使 搜索 引擎 更 加 容易 抓 取 和 索引 
对 于 一 些 网 站 ， 特 别 是 那些 严重 依赖 于 ; 
Flash 的 网 站 ，HTML 5 是 一 个 大 福音 。 如 果 ， 
整个 网 站 都 是 Flash 的 ， 就 一 定 会 看 到 转换 成 
HTML 5 的 好 处 。 首 先 ， 搜 索引 擎 的 蜂 蛛 将 能 ; 
够 抓 取 站 点 内 容 。 所 有 说 入 到 动画 中 的 内 容 
将 全 部 可 以 被 搜索 引擎 读 取 。 
2. 提供 更 多 的 功能 


@ 一 o 


已 久 的 基于 HTML 5 的 iPad 应 用 平台 ， 每 天 都 不 
断 地 有 基于 HTML 5 的 网 站 和 HTML 5 特性 的 网 
站 被 推出 ， 以 保持 站 点 处 于 新 技术 的 前 沿 ， 也 
可 以 很 好 地 提高 用 户 的 友好 体验 。 


3. 可 用 性 的 提高 ， 提 高 用 户 的 友好 体验 


最 后 我 们 从 可 用 性 的 角度 上 看 ，HIML 5 


| 可 以 更 好 地 促进 用 户 与 网 站 间 的 互动 。 多 媒 


使 用 HTML 5 的 另 一 个 好 处 就 是 它 可 以 增 
加 更 多 的 功能 。 对 于 HTML 5 的 功能 性 问题 ， :; 
我 们 从 全 球 几 个 主流 站 点 对 它 的 青睐 就 可 以 看 | 


/ .4 


国 7.4.1 课堂 小 实例 
由 于 HTML 4 缺少 结构 ， 即 使 是 形式 良好 ; 
的 HTML 页 面 也 比较 难以 处 理 。 必 须 分 析 标题 | 


| 体 网 站 可 以 获得 更 多 的 改进 ， 特 别 是 在 移动 
; 平台 上 的 应 用 ， 使 用 HTML 5 可 以 提供 更 多 高 


质量 的 视频 和 音频 流 。 


HTML 5 新 增 的 元 素 和 废除 的 元 素 


本 节 将 详细 介绍 HIML 5 中 新 增 和 废除 了 哪些 元 素 。 


新 增 的 结构 元 素 


<section>...</section> 


; 2. header 元 素 


的 级 别 ， 才 能 看 出 各 个 部 分 的 划分 方式 。 边 | 
栏 、 页 脚 、 页 眉 、 导 航 条 、 主 内 容 区 和 各 篇 : 
文章 都 由 通用 的 DIV 元 素来 表示 。HTML 5 添 | 
加 了 一 些 新 元 素 ， 专 门 用 来 标识 这 些 常见 的 | 
结构 ， 不 再 需要 为 DIV 的 命名 费 尽心 思 ， 对 于 ; 
手机 、 阅 读 器 等 设备 更 有 语义 的 好 处 。 : 

HTML 5 增加 了 新 的 结构 元 素来 表达 这 些 | 
最 常用 的 结构 ， 如 下 所 述 。 
友 ”section: 可 以 表达 书本 的 一 部 分 或 一 章 ， 
或 者 一 章 内 的 一 节 。 
header， 页面 主体 上 的 头 部 ， 并 非 head 元 素 。 
footer: 页 面 的 底部 (页 脚 ) ， 可 以 是 一 ; 
封 邮 件 签名 的 所 在 。 
nav: 到 其 他 页 面 的 链接 集合 。 : 
article: blog、 杂 志 、 文 章 汇编 等 中 的 一 ; 
篇 文章 。 
1. section 元 素 | 
section 元 素 表示 页 面 中 的 一 个 内 容 区 | 
， 比 如 章节 、 页 眉 、 页 脚 或 页 面 中 的 其 他 | 
部 分 。 它 可 以 与 hl、h2、h3、h4、h5、h6 等 ; 
元 素 结 合 起 来 使 用 ， 标 示 文档 结构 。 

HTML 5 中 代码 示例 : 


六 
太 


太 
六 


站 


5 article 元 素 


; 纸 中 的 一 篇 文章 。 


header 元 素 表示 页 面 中 一 个 内 容 区 块 或 整 
个 页 面 的 标题 。 
HTML 5 中 代码 示例 : 


<header>...</header> 


: 3. footer 元 素 


footer 元 素 表示 整个 页 面 或 页 面 中 一 个 内 


| 容 区 块 的 脚注 。 一 般 来 说 ， 它 会 包含 创作 者 
| 的 姓名 、 创 作 日 期 及 创作 者 联系 信息 。 


HIML 5 中 代码 示例 : 


<footer></footer> 


: 4. nav 元 素 


nav 元 素 表示 页 面 中 导航 链接 的 部 分 。 
HIML 5 中 代码 示例 : 


<nav></nav> 


article 元 素 表示 页 面 中 的 一 块 与 上 下 文 不 
相关 的 独立 内 容 ， 如 博客 中 的 一 篇 文章 或 报 


HTML 5 中 代码 示例 : 


<article>...</article> 
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下 面 是 一 个 网 站 的 页 面 ， 用 HTML 5 编写 | 


代码 如 下 所 示 。 
实例 代码 : 


“ee 一 他 


| 运行 代码 ， 在 浏览 器 中 浏览 效果 ， 如 图 
| 7-6 所 示 。 这 些 新 元 素 的 引入 ， 将 不 再 使 得 布 
i 局 中 都 是 div， 而 是 通过 标签 元 素 就 可 以 识别 
;出 来 每 个 部 分 的 内 容 定位 。 这 种 改变 对 于 搜索 
| 引擎 而 言 ， 将 带 来 内 容 准确 度 的 极 大 飞跃 。 


ETT 
wr Th 


| 国 
| [Ee 


Ee ” 站 鸭 aah 


新 时 代 科技 公司 
标题 1 


内容 1..，( 省 咯 字 ] 


标题 2 


内 容 下 此 ..，( 和 省略 字 ) 


2014 人 千代 由 技 全 


图 7-6 HTML5 新 增 结 构 元 素 实例 


全 7.4.2 课堂 小 实例 一 -新 增 的 块 级 的 语义 元 素 一 一 一 一 一 


HTML 5 还 增加 了 一 些 纯 语义 性 的 块 级 元 
: aside、figure、figcaption、dialog。 

aside: 定义 页 面 内 容 之 外 的 内 容 ， 比 如 

侧 边 栏 。 


的 标题 。 

figcaption: 媒介 内 容 的 标题 说 明 。 
dialog: 定义 对 话 (会话 ) 。 

aside 可 以 用 以 表达 注 记 、 侧 栏 、 摘 要 、 


太 
太 


插入 的 引用 等 作为 补充 主体 的 内 容 。 以 下 代 | 
码 表达 blog 的 侧 栏 。 在 浏览 器 中 浏览 ， 效 果 如 | 


图 7-7 所 示 。 
实例 代码 : 
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figure 定义 媒介 内 容 的 分 组 ， 以 及 它们 |= 


we 


图 7-7 aside 元 素 
figure 元 素 表示 一 段 独立 的 流 内 容 ， 一 般 
| 表示 文档 主题 流 内 容 中 的 一 个 独立 单元 。 使 
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用 figcaption 元 素 为 figure 元 素 组 添加 标题 。 看 看 下 面 给 图 片 添加 的 标示 。 
HTML 4 中 代码 示例 : 


上 面 的 代码 文字 在 p 标 答 里 ， 与 img 标 签 各 行 其 道 ， 很 难 让 人 联想 到 这 就 是 标题 。 
HIML 5 中 代码 示例 : 


运行 代码 ， 在 浏览 器 中 浏览 效果 ， 如 图 7-8 所 示 。HIML 5 采用 figure 元 素 对 此 进行 了 改正 。 
当 和 figcaption 元 素 组 合 使 用 时 ， 我 们 就 可 以 语义 化 地 联想 到 这 就 是 图 片 相 对 应 的 标题 。 


[到 


图 7-8 figure 元 素 实例 
dialog 元 素 用 于 表达 人 们 之 间 的 对 话 。 在 HTML 5 中 ，dt 用 于 表示 说 话 者 ， 而 dd 则 用 来 表示 
说 话 者 的 内 容 。 
实例 代码 : 


运行 代码 ， 在 浏览 器 中 浏览 如 图 7-9 所 示 。 
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和 你 们 是 怎么 党 理 加 盟 商 的 


为 加 盟 商 提供 门店 的 管理 制度 、 营 理 系统 、 人 员 配 置 表 ， 并 不 新 给 加 盟 商 帝 素 新 的 经 营 理 
厅 媒 人 并 定期 做 加 加 商 的 信息 反馈 ， 皂 藻 洗 验 ， 


你 们 提供 技术 支持 吗 全 


一 个 成 功 的 品牌 必须 有 强大 的 实力 局 后 大 这 个 实力 就 时 技术 水 平 ， 公 司 总 部 技术 研发 团 
A 不 断 研 发 具有 市 场 总 争 力 的 祈 产品 ， 为 加 盟 商 提供 根 县 说 最 力 


”运行 代码 ， 在 浏览 器 中 浏览 ， 效 果 如 图 
; 7-10 所 示 ，<mark> 与 </mark> 标 签 之 间 的 文字 
“牛奶 ”添加 了 记号 。 


图 7-9 dialog 元 素 实例 


幅 7.4.3 ”课堂 小 实例 一 一 新 增 | 中 

的 行内 的 语义 元 素 -。 | 
HTML 5 增加 了 一 些 行内 语义 元 素 : 

mark、 time、meter、progress。 

mark: 定义 有 记号 的 文本 。 

time: 定义 日 期 /时 间 。 

meter: 定义 预定 义 范围 内 的 度量 。 | 

progress: 定义 运行 中 的 进度 。 | 2 

mark 元 素 用 来 标记 一 些 不 是 特别 需要 强 ; 图 7-10 mark 元 素 实 例 

调 的 文本 。 | time 元 素 用 于 定义 时 间或 日 期 。 该 元 素 可 

; 以 代表 24 小 时 中 的 某 一 时 刻 ， 在 表示 时 刻 时 ， 

| 允许 有 时 间 差 。 在 设置 时 间或 日 期 时 ， 只 需 将 

| 该 元 素 的 属性 “datetime” 设 为 相应 的 时 间或 日 

| 期 即 可 。 

实例 代码 : 


ES | 


TV43wmarchml 屠 记 -CX| 三 产 音 


对 攻 对 对 


<p> 元 素 ID 号 为 “p1” 中 的 <time> 元 素 表 示 的 是 日 期 。 在 页 面 解 析 时 ， 获 取 的 是 属性 
“datetime” 中 的 值 ， 而 标记 之 间 的 内 容 只 是 用 于 显示 在 页 面 中 。 

<> 元 素 D 号 为 “p2” 中 的 <time> 元 素 表 示 的 是 日 期 和 时 间 ， 它 们 之 间 使 用 字母 “T” 进 行 分 隔 。 

<p> 元 素 卫 号 为 “p3” 中 的 <time> 元 素 表示 的 是 将 来 时 间 。 

<p> 元 素 ID 号 为 “p4” 中 的 <time> 元 素 表示 的 是 发 布 日 期 。 为 了 在 文档 中 将 这 两 个 日 期 进 
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TD43imehtm| 区 了-cx| 们 立 澡 


行 区 分 ， 在 最 后 一 个 <time> 元 素 中 增加 了 [二 = 


“pubdate” 属 性 ， 表 示 此 日 期 为 发 布 日 期 。 人 
运行 代码 ， 在 浏览 器 中 浏览 效果 ， 如 上 ” 礼 天 是 201 插 雪 106 
示 再 时间 是 201 年 划 10 日 净 上 蝶 
图 7-11 所 示 。 公司 最 新 村 型 笠 于 今年 年 夺 上 市 
二 清 息 发 布 于 201 症 4 月 1 日 


图 7-11 time 元 素 实例 
progress 是 HTML 5 中 新 增 的 状态 交互 元 素 ， 用 来 表示 页 面 中 的 某 个 任务 完成 的 进度 〈 进 
程 ) 。 例 如 下 载 文件 时 ， 文 件 下 载 到 本 地 的 进度 值 ， 可 以 通过 该 元 素 动态 展示 在 页 面 中 ， 展 示 
的 方式 既 可 以 使 用 整数 〈 如 1 一 100) ， 也 可 以 使 用 百分比 〈 如 10% 一 100%) 。 
下 面 通过 一 个 实例 介绍 progress 元 素 在 文件 下 载 时 的 使 用 。 
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为 了 使 progress 元 素 能 动态 展示 下 载 进 
度 ， 需 要 通过 JavaScript 代 码 编写 一 个 定时 事 
件 。 在 该 事件 中 ， 累 加 变量 值 ， 并 将 该 值 设 
置 为 progress 元 素 的 “value” 属 性 值 ， 当 这 
个 属性 值 大 于 或 等 于 progress 元 素 的 “max” 
属性 值 时 ， 则 停止 累加 ， 并 显示 “下 载 完 
成 ! ”的 字样 ， 否 则 ， 动 态 显 示 正 在 累加 的 
百分比 数 。 如 图 7-12 所 示 。 

Meter 元 素 用 于 表示 在 一 定数 量 范围 中 的 
值 ， 如 投票 中 ， 候 选 人 各 占 比 例 情 况 及 考试 
分 数 等 。 下 面 通 过 一 个 实例 介绍 meter 元 素 在 
展示 投票 结果 时 的 使 用 。 


实例 代码 : 


“~e® 


图 7-12 ”progress 元 素 实例 


候选 人 “ 李 明 ” 所 占 的 比例 是 百分制 中 的 60， 最 低 比例 可 能 为 0， 但 实际 最 低 为 10， 最 高 
比例 可 能 为 100， 但 实际 最 高 为 90， 如 图 7-13 所 示 。 
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图 7-13 ”meter 元 素 实例 


上 中 7.4.4 课堂 小 实例 一 一 新 增 的 藤 入 多 媒体 元 素 与 交互 性 元 素 一 
HTML 5 新 增 了 很 多 多 媒体 和 交互 性 元 素 ， 如 video、 audio。 在 HIML 4 当中 如 果 要 衬 入 一 
个 视频 或 是 音频 的 话 ， 需 要 引入 一 大 段 的 代码 ， 还 有 兼容 各 个 浏览 器 ， 而 HTML 5 只 需要 通过 
引入 一 个 标签 就 可 以 ， 就 像 :mg 标签 一 样 方便 。 
1. video 元 素 
video 元 素 定义 视频 ， 如 电影 片段 或 其 他 视频 流 。 
HTML 5 中 代码 示例 : 


HTML 4 中 代码 示例 : 


2. audio 元 素 
audio 元 素 定义 音频 ， 如 音乐 或 其 他 音频 流 。 
HTML 5 中 代码 示例 : 


HTML 4 中 代码 示例 : 


embed 元 素 用 来 插入 各 种 多 媒体 ， 格 式 可 以 是 Midi、Wav、AIFF、AU、MP3 等 。 
HTML 5 中 代码 示例 : 


本 
3 
总 

淖 


3 
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和 课堂 实录 “ee 一 他 
HTML 4 中 代码 示例 : 


侦 7.4.5 课堂 小 实例 一 -新 增 的 input 元 素 的 类 型 一 一 一 一 一 一 0 
在 网 站 页 面 的 时 候 ， 难 免 会 碰 到 表单 的 开发 ， 用 户 输入 的 大 部 分 内 容 都 是 在 表单 中 完成 提 
交 到 后 人 台 的 。 在 HTML 5 中 ， 也 提供 了 大 量 的 表单 功能 。 
在 HTML 5 中 ， 对 input 元 素 进行 了 大 幅度 的 改进 ， 使 得 我 们 可 以 简单 地 使 用 这 些 新 增 的 元 
素来 实现 需要 JavaScript 来 实现 的 功能 。 
1. url 类 型 
input 元 素 里 的 url 类 型 是 一 种 专门 用 来 输入 url 地 址 的 文本 框 。 如 果 该 文本 框 中 内 容 不 是 url 
地 址 格式 的 文字 ， 则 不 允许 提交 。 例 如 : 


设置 此 类 型 后 ， 从 外 观 上 来 看 与 普通 的 元 素 差不多 ， 可 是 如 果 你 将 此 类 型 放 到 表单 中 
之 后 ， 当 单 击 “ 提 交 ” 按 钮 时 ， 如 果 此 输入 框 中 输入 的 不 是 一 个 URL 地 址 ， 将 无 法 提交 ， 
如 图 7-14 所 示 。 
2. Email 类 型 

如 果 将 上 面 的 URL 类 型 的 代码 中 的 type 修 改 为 email， 那 么 在 表单 提交 的 时 候 ， 会 自动 验证 
此 输入 框 中 的 内 容 是 否 为 email 格 式 ， 如 果 不 是 ， 则 无 法 提交 。 代 码 如 下 : 


如 果 用 户 在 该 文本 框 中 输入 的 不 是 email 地 址 的 话 ， 则 全 天 辽 外 罗 计 提交， 如 图 7- DA 


| 

os- ss BM RFPO Glnks Deocgle > S me ~ Es» 
| | 

[rr | 

| 加 语 RHt。 | 

CG 0 2 WE [les sa i We 

图 7-14 url 类 型 实例 图 7-15 email 类 型 实例 
3. date 类 型 


input 元 素 里 的 date 类 型 在 开发 网 页 过 程 中 是 非常 多 见 的 。 例 如 我 们 经 常 看 到 的 购买 日 期 、 
发 布 时 间 、 订 票 时 间 。 这 种 date 类 型 的 时 间 是 以 日 历 的 形式 来 方便 用 户 输入 的 。 
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在 HTML 4 中 ， 需 要 结合 使 用 JavaScript 才 能 实现 日 历 选 择 日 期 的 效果 ; 在 HTML 5 中 ， 只 需 
要 设置 input 为 date 类 型 即 可 ， 提 交 表 单 的 时 候 也 不 需要 验证 数据 了 ， 如 图 7-16 所 示 。 
4.time 类 型 

input 里 的 ttme 类 型 是 专门 用 来 输入 时 间 的 文本 框 。 并 且 会 在 提交 时 对 输入 时 间 的 有 效 性 进 
行 检查 。 它 的 外 观 可 能 会 根据 不 同类 型 的 浏览 器 而 出 现 不 同 表现 形式 。 


time 类 型 是 用 来 输入 时 间 的 ， 在 提交 的 时 候 检 查 是 否 输入 了 有 效 的 时 间 ， 如 图 7-17 


所 示 。 
ET ET Er EE 
[3 生气 有 | 加 jeVVDYHTML+C55 pv) Bsr Ql [3 专 他 月 加 ieW/DVHTML'CS5 阿 和 与 有 局 深 生 实 录 / 政 条 /CHC v | 加. | 


om 图 5 二 OR MEO Unks 四 cooole > RE - Es» 
Er -ss EE 


oom - 图 ss 国 Rax 四 Pro Sine ocge > Sirm ~ ee Dr - Fs» 


OE he 天主 站 谢 上 中 民 )D0s [人 5 CD 洒 T 由 山门 昌 遇 1006 


图 7-16 date 类 型 实例 图 7-17 time 类 型 实例 
5. DateTime 类 型 


Datetime 类 型 是 一 种 专门 用 来 输入 本 地 日 期 和 时 间 的 文本 框 。 同 样 ， 它 在 提交 的 时 候 也 会 
对 数据 进行 检查 。 目 前 主流 浏览 器 都 不 支持 datetime 类 型 。 


且 7.4.6 废除 的 元 素 一 


在 HIML 5 中 废除 了 很 多 元 素 ， 具 体 如 下 。 


1. 能 使 用 CSS 替 代 的 元 素 
对 于 basefont、big、center、font、s、strike、tt、u 这 些 元 素 ， 由 于 它们 的 功能 都 是 纯粹 为 
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课堂 实录 “e- 一 全 
页 面 样式 服务 的 ， 而 HTML 5 中 提倡 把 页 面 样式 性 功能 放 在 CSS 样 式 表 中 编辑 ， 所 以 将 这 些 元 
素 废 除了 。 
2. 不 再 使 用 frame 框 架 


响 ， 


对 于 frameset 元 素 、frame 元 素 与 noframes 元 素 ， 由 于 frame 框 架 对 网 页 可 用 性 存在 负面 影 
在 HTML 5 中 已 不 支持 frame 框 架 ， 只 支持 iframe 框 架 ， 同 时 将 以 上 这 3 个 元 素 废除 。 


3. 只 有 部 分 浏览 器 支持 的 元 素 


对 于 applet、bgsound、blink、marquee 等 元 素 ， 由 于 只 有 部 分 浏览 器 支持 这 些 元 素 ， 特 别 


是 bgsound 元 素 及 marquee 元 素 ， 只 被 Internet Explorer 所 支持 ， 所 以 在 HTML 5 中 被 废除 。 其 中 


applet 元 素 可 由 embed 元 素 或 object 元 素 替 代 ，bgsound 元 素 可 由 audio 元 素 替 代 ，marquee 可 以 由 


JavaScript 编 程 的 方式 所 替代 。 
4. 其 他 被 废除 的 元 素 


对 对 对 对 对 对 对 


其 他 被 废除 元 素 还 有 以 下 各 项 。 

废除 acronym 元 素 ， 使 用 abbr 元 素 蔡 代 。 

废除 dir 元 素 ， 使 用 ul 元 素 蔡 代 。 

废除 isindex 元 素 ， 使 用 form 元 素 与 input 元 素 相 结合 的 方式 替代 。 
废除 listing 元 素 ， 使 用 pre 元 素 替 代 。 

废除 xmp 元 素 ， 使 用 code 元 素 蔡 代 。 

废除 nextid 元 素 ， 使 用 GUIDS 替 代 。 

废除 plaintext 元 素 ， 使 用 “text/plian”MIME 类 型 替代 。 


新 增 的 属性 和 废除 的 属性 


© HTML 5 中 ， 在 新 增加 和 废除 很 多 元 素 的 同时 ， 也 增加 和 废除 了 很 多 


属性 


人 性 7.5.1 新 增 的 属性 


1. 表单 新 增 相 关 属 性 


太 


六 


太 
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对 input (type=text) 、select、textarea 与 button 指 定 autofocus 属 性 。 它 以 指定 属性 的 方式 让 
元 素 在 画面 打开 时 自动 获得 焦点 。 

对 input (type=text) 、textarea 指 定 placeholder 属 性 ， 它 会 对 用 户 的 输入 进行 提示 ， 提 示 用 
户 可 以 输入 的 内 容 。 

对 input、output、select、textarea、bnutton 与 fieldset 指 定 form 属 性 。 它 声明 属于 哪个 表单 
然后 将 其 放置 在 页 面 的 任何 位 置 ， 而 不 是 表单 之 内 。 

对 input (type=text) 、textarea 指 定 required 属 性 。 该 属性 表示 用 户 提交 时 进行 检查 ， 检 查 该 
元 素 内 必定 要 有 输入 内 容 。 

为 Input 标 签 增加 几 个 新 的 属性 : autocomplete、min、max、multiple、pattern 与 step。 还 有 
list 属 性 与 datalist 元 素 配 合 使 用 ; datalist 元 素 与 autocomplete 属 性 配合 使 用 。multiple 属 性 允 
许 上 传 时 一 次 上 传 多 个 文件 ; pattern 属 性 用 于 验证 输入 字段 的 模式 ， 其 实 就 是 正则 表达 
式 。step 属性 规定 输入 字段 的 合法 数字 间隔 (假如 step="3"， 则 合法 数字 应 该 是 -3、0、3、 
6， 以 此 类 推 ) ，step 属 性 可 以 与 max 及 min 属 性 配合 使 用 ， 以 创建 合法 值 的 范围 。 


@--e 第 7 课 

友 ”为 Input、button 元 素 增 加 formaction、formenctype、formmethod、formnovalidate 与 formtarget 
属性 。 用 户 重 载 form 元 素 的 action、enctype、method、novalidate 与 target 属 性 。 为 fieldset 元 
素 增加 disabled 属 性 ， 可 以 把 它 的 子 元 素 设 为 disabled 状 态 。 

太 ”为 Input、button、form 增 加 novalidate 属 性 ， 可 以 取消 提交 时 进行 的 有 关 检 查 ， 表 单 可 以 被 
无 条 件 地 提交 。 

2. 链接 相关 属性 

太 ”为 a、area 增 加 media 属 性 。 规 定 目标 URL 是 为 什么 类 型 的 媒介 /设备 进行 优化 的 。 该 属性 用 
于 规定 目标 URL 是 为 特殊 设备 〈 如 iPhone) 、 语 音 或 打印 媒介 设计 的 。 该 属性 可 接受 多 个 
值 ， 只 能 在 href 属 性 存在 时 使 用 。 

友 “为 area 增 加 herflang 和 rel 属 性 。hreflang 属 性 规定 在 被 链接 文档 中 的 文本 的 语言 。 只 有 当 设置 
了 href 属 性 时 ， 才 能 使 用 该 属性 。rel 属 性 规定 当前 文档 与 被 链接 文档 /资源 之 间 的 关系 。 只 
有 当 使 用 href 属 性 时 ， 才 能 使 用 rel 属 性 。 

六 为 link 增 加 size 属 性 。sizes 属 性 规定 被 链接 资源 的 尺寸 。 只 有 当 被 链接 资源 是 图 标 时 
(rel="icon")， 才 能 使 用 该 属性 。 该 属性 可 接受 多 个 值 ， 值 由 空格 分 隔 。 

六” 为 base 元 素 增加 target 属 性 ， 主 要 是 保持 与 8 元 素 的 一 致 性 。 

3. 其 他 属性 

太 ”为 ol 增加 reversed 属 性 ， 它 指定 列表 倒序 显示 。 

友 ”为 meta 增 加 charset 属 性 。 

友 ”为 menu 增 加 type 和 1label 属 性 。labe] 为 菜单 定义 一 个 课件 的 标注 ，type 属 性 让 菜单 可 以 以 上 
下 文 菜单 、 工 具 条 与 列表 菜单 3 种 形式 出 现 。 

六 ”为 style 增 加 scoped 属 性 。 它 允许 我 们 为 文档 的 指定 部 分 定义 样式 ， 而 不 是 整个 文档 。 如 果 
使 用 "scoped" 属性 ， 那 么 所 规定 的 样式 只 能 应 用 到 style 元 素 的 父 元 素 及 其 子 元 素 。 

太 “为 script 增 减 属 性 ， 它 定义 脚本 是 否 异步 执行 。async 属 性 仅 适 用 于 外 部 脚本 〈 只 有 在 使 用 
src 属 性 时 ) 有 多 种 执行 外 部 脚本 的 方法 。 

太 ”为 HTML 元 素 增加 manifest， 开 发 离线 Web 应 用 程序 时 它 与 API 结 合 使 用 ， 定 义 一 个 URL,， 
在 这 个 URL 上 描述 文档 的 缓存 信息 。 

六 ”为 iframe 增 加 3 个 属性 ，sandbox、seamless、srcdoc。 用 来 提高 页 面 安 全 性 ， 防 止 不 信任 的 
Web 页 面 执行 某 些 操作 。 


人 用 7.5.2 废除 的 属性 


HIML 4 中 一 些 属性 在 HIML 5 中 不 再 被 使 用 ， 而 是 采用 其 他 属性 或 其 他 方式 进行 替代 。 如 
表 7-1 所 示 。 


表 7-1 属性 替代 
HTML 4 中 使 用 的 属性 使 用 该 属性 的 元 素 在 HTML 5 中 的 替代 方案 
TeV link、a rel 
charset link、 a 资源 的 中 使 用 HTTP Content- 
shape、coords a 使 用 area 元 素 代替 a 元 素 
longdesc img、ifame 使 用 a 元 素 链接 到 校长 描述 
target link 多 余 属性 ， 被 省 略 
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卖 表 
HTML 4 中 使 用 的 属性 使 用 该 属性 的 元 素 在 HTML 5 中 的 替代 方案 

nohref area 多 余 属性 ， 被 省 略 
profile head 多 余 属性 ， 被 省 略 
Version HTML 多 余 属性 ， 被 省 略 
name img id 
scheme meta 只 为 某 个 表单 域 使 用 scheme 
archive、 chlassid、 object 使 用 data 与 type 属 性 类 调用 插件 
codebose、codetype、 declare、 需要 使 用 这 些 属性 来 设置 参数 时 ， 使 用 
standby param 属 性 
valuetype、type param 返回 值 类 型 

使 用 以 明确 简洁 的 文字 开头 、 后 跟 详 述 
axis、abbr td、th 文字 的 形式 。 可 以 对 更 详细 内 容 使 用 title 

属性 ， 来 使 单元 格 的 内 容 变 得 简短 

闪 在 被 链接 的 资源 中 使 用 HTTP Content- 

Rt type 头 元 素 
ile caption、input、legend、div、 使 用 CSS 样 式 表 替 代 


hl、h2、h3、h4、hs、h6、p 


alink、link、text、vlink、 


badkeouid. Depolo body 使 用 CSS 样 式 表 替 代 
align、bgcolor、border、 
cellpadding、cellspacing、frame、 table 使 用 CSS 样 式 表 替 代 


mles、width 


align、char、charo 任 、height、 
nowrap、valign 


align、bgcolor、char、charoff、 


tbody、thead、tfoot 


使 用 CSS 样 式 表 替 代 


height、nowrap、valign、width 人 使 用 CSS 样 式 表 蔡 代 
人 bgcolor、 char、 charoff、 在 使 用 CSS 样 式 表 替 代 
es proper ana col、colgroup 使 用 CSS 样 式 表 替代 
align、border、hspace、vspace object 使 用 CSS 样 式 表 替 代 
clear br 使 用 CSS 样 式 表 替 代 
compace、type ol ul、 使 用 CSS 样 式 表 替 代 
compace dl 使 用 CSS 样 式 表 替 代 
compace menu 使 用 CSS 样 式 表 替 代 
width pre 使 用 CSS 样 式 表 替 代 
align、hspace、vspace img 使 用 CSS 样 式 表 替代 
align、noshade、size、width hr 使 用 CSS 样 式 表 替代 


@-e 第 / 识 WN 
( 续 表 ) 


HTML 4 中 使 用 的 属性 使 用 该 属性 的 元 素 在 HTML 5 中 的 替代 方案 


align、frameborder、scrolling、 
marginheight、marginwidth、 
autosubmit 


[OO 


iframe 使 用 CSS 样 式 表 替代 


menu 


(1) HTML 5 的 新 特性 本 5 


(2) HIML 5 中 的 标记 方法 图 和 

(3) HTML 5 语法 中 的 3 个 要 点 
二 、 选 择 题 

(1) HTML 5 增加 了 新 的 结构 元 素来 表达 这 些 最 常用 的 结构 : 


A. section、 header、footer、nav、article 


B. aside、figure、figcaption、dialog 

C. mark、time、meter、Pprogress 

(2) 新 增 的 input 元 素 的 类 型 

A.(1) url 类 型 (2) Email 类 型 (3) date 类 型 
(4) time 类 型 (5) DateTime 类 型 

B. (1) 能 使 用 CSS 替 代 的 元 素 (2) 不 再 使 用 frame 框 架 
(3) 只 有 部 分 浏览 器 支持 的 元 素 


C. (1) video 元 素 (2) audio 元 素 (3) embed 元 素 
本 课 小 结 
@ 本 课 主要 讲述 了 认识 HIML 5、HTML 5 的 新 特性 、HTML 5 与 HTML 4 


的 区 别 、HTML 5 新 增 的 元 素 和 废除 的 元 素 、 新 增 的 属性 和 废除 的 属性 。 随 着 HTML 5 的 迅猛 发 
展 ， 各 大 浏览 器 开发 公司 如 Google、 微 软 、 苹 果 和 Opera 的 浏览 器 开发 业务 都 变 得 异常 繁忙 。 在 
这 种 局 势 下 ， 学 习 HTML 5 无 疑 成 为 Web 开 发 者 的 一 项 重要 任务 ， 谁 先 学 会 HIML 5， 谁 就 掌握 了 
迈 向 未 来 Web 平 台 的 一 把 钥匙 。 
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第 8 课 
HTML S 的 结构 


本 课 导读 

在 HTML 5 的 新 特性 中 ， 新 增 的 结构 元 素 主 要 功能 就 是 解决 之 
前 在 HTML 4 中 Div 漫 天 飞舞 的 情况 ， 增 强 网 页 内 容 的 语义 性 ， 这 对 
搜索 引擎 而 言 ， 将 更 好 识别 和 组 织 索 引 内 容 。 合 理 地 使 用 这 种 结构 
元 素 ， 将 极 大 地 提高 搜索 结果 的 准确 度 和 体验 。 新 增 的 结构 元 素 ， 
从 代码 上 看 ， 很 容易 看 出 主要 是 消除 Div， 即 增强 语义 ， 强 调 HTML 
的 语义 化 。 


技术 要 点 


女 ”新 增 的 主体 结构 元 素 
太 ”新 增 的 非 主体 结构 元 素 


顶部 传统 网 站 导航 条 


2 


人 


ee 


， 


me 


| 


@-e 第 课 上 II 
8 | 新 增 的 主体 结构 元 素 一 一 一 一 一 一 o 
@ 


在 HIML 5 中 ， 为 了 使 文档 的 结构 更 加 清晰 明确 ， 容 易 阅 读 ， 增 加 了 
很 多 新 的 结构 元 素 ， 如 页 眉 、 页 脚 、 内 容 区 块 等 。 


肯 8.1.1 课堂 小 实例 一 一 article 元 素 


article 元 素 可 以 灵活 使 用 ，article 元 素 可 以 包含 独立 的 内 容 项 ， 所 以 可 以 包含 一 个 论坛 帖 
子 、 一 篇 杂志 文章 、 一 篇 博客 文章 、 用 户 评论 等 。 这 个 元 素 可 以 将 信息 各 部 分 进行 任意 分 组 ， 
而 不 论 信息 原来 的 性 质 。 

作为 文档 的 独立 部 分 ， 每 一 个 article 元 素 的 内 容 都 具有 独立 的 结构 。 为 了 定义 这 个 结构 ， 
可 以 利用 前 面 介绍 的 <header> 和 <footer> 标 签 的 丰富 功能 。 它 们 不 仅仅 能 够 用 在 正文 中 ， 也 能 够 
用 于 文档 的 各 个 节 中 。 

下 面 以 一 篇 文章 讲述 article 元 素 的 使 用 ， 具 体 代 码 如 下 。 


在 header 元 素 中 嵌入 了 文章 的 标题 部 [GO 
分 ， 在 hi 元 素 中 是 文章 的 标题 “不 能 改变 。 | ee sn 二 “uh 
世界 ， 就 要 改变 自己 去 适应 环境 ”， 文 章 “| 不 能 改变 世界 ， 就 要 改变 自己 去 适应 环境 
的 发 表 日 期 在 p 元 素 中 。 在 标题 下 部 的 p 元 | 


从 生 不 如 合十 之 八 九 ， 我 们 不 能 折 户 总: 恒 。 当 苞 们 的 生活 - 工作 沸 肥 | 次 坷 和 挫折 时 ， 我 们 
素 中 是 文章 的 正文 ， 在 结尾 处 的 footer 元 | 中 生生 全 sm 
素 中 是 文章 的 版 权 。 对 这 部 分 内 容 使 用 JWoww 

article 元 素 。 在 浏览 器 中 浏览 效果 ， 如 图 8-1 | 


所 示 。 


iO0% 


图 8-1 article 元 素 
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另外 ，article 元 素 也 可 以 用 来 表示 插件 ， 它 的 作用 是 使 插件 看 起 来 好 像 内 艇 在 页 面 中 一 样 。 


一 个 网 页 中 可 能 有 多 个 独立 的 article 元 素 ， 每 一 个 article 元 素 都 允许 有 自己 的 标题 与 脚注 等 
从 属 元 素 ， 并 人 允许 对 自己 的 从 属 元 素 单独 使 用 样式 。 如 一 个 网 页 中 的 样式 可 能 如 下 所 示 。 


上 8.1.2 课堂 小 实例 一 section 元 素 一 一 一 一 0o 


section 元 素 用 于 对 网 站 或 应 用 程序 中 页 面 上 的 内 容 进行 分 块 。 一 个 section 元 素 通 常 由 内 容 
及 其 标题 组 成 。 但 section 元 素 也 并 非 一 个 普通 的 容器 元 素 ， 当 一 个 容器 需要 被 重新 定义 样式 或 
者 定义 脚本 行为 的 时 候 ， 还 是 推荐 使 用 Div 控 制 。 


下 面 是 一 个 带 有 section 元 素 的 article 元 素 例子 。 
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从 上 面 的 代码 可 以 看 出 ， 首 页 整体 呈 
现 的 是 一 段 完整 独立 的 内 容 ， 所 有 我 们 要 用 
article 元 素 包 起 来 ， 这 其 中 又 可 分 为 3 段 ， 每 
一 段 都 有 一 个 独立 的 标题 ， 使 用 了 两 个 section | 证 wans| 
元 素 为 其 分 段 。 这 样 使 文档 的 结构 显得 清 | 簿 多 | 
晰 。 在 浏览 器 中 浏览 效果 ， 如 图 8-2 所 示 。 se | 
ME 全 是 一 般 帝 见 的 还 是 村 村 。 这 种 枉 子 果实 外 皮 肥 原 ， 内 请 天 狂 ， 由 秆 泡 和 


种 子 构成 萌 子 蔚 彩 肾 掀 、 辟 甜 可 口 ， 是 秋冬 季 审 见 的 关 性 住 果 。 宫 襄 让 富 的 维生素 c， 对 人 
体 有 着 很 大 的 好 处 ， 


起 100% 


图 8-2 带 有 section 元 素 的 article 元 素 实例 
article 元 素 和 section 元 素 有 什么 区 别 呢 ? 在 HTML 5 中 ，article 元 素 可 以 看 成 是 一 种 特殊 种 
类 的 section 元 素 ， 它 比 section 元 素 更 强调 独立 性 。 即 section 元 素 强调 分 段 或 分 块 ， 而 article 强 调 
独立 性 。 如 果 一 块 内 容 相对 来 说 比较 独立 、 完 整 的 时 候 ， 应 该 使 用 article 元 素 ， 但 是 如 果 想 将 
一 块 内 容 分 成 几 段 的 时 候 ， 应 该 使 用 section 元 素 。 


肯 8.1.3 ”课堂 小 实例 一 -nav 元 素 一 一 一 一 一 一 一 一 一 一 一 一 0 


nav 元 素 在 HTML 5 中 用 于 包 豪 一 个 导航 链接 组 ， 用 于 显 式 地 说 明 这 是 一 个 导航 组 ， 在 同一 
个 页 面 中 可 以 同时 存在 多 个 nav。 

并 不 是 所 有 的 链接 组 都 要 被 放 进 nav 元 素 ， 只 需要 将 主要 的 、 基 本 的 链接 组 放 进 nav 元 素 即 
可 。 例 如 ， 在 页 脚 中 通常 会 有 一 组 链接 ， 包 括 服务 条 款 、 首 页 、 版 权 声明 等 ， 这 时 使 用 footer 
元 素 是 最 恰当 。 

一 直 以 来 ， 习 惯 于 使 用 形 如 <div id="nav"> 或 <ul id="nav"> 这 样 的 代码 来 编写 页 面 的 导航 。 
在 HTML 5 中 ， 可 以 直接 将 导航 链接 列表 放 到 <nav> 标 签 中 : 
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这 个 实例 是 页 面 之 间 的 导航 ，nav 元 素 
中 包含 了 3 个 用 于 导航 的 超级 链接 ， 即 “ 首 
页 ”、“ 关 于 我 们 ”和 “在 线 论坛 ”。 该 导 
航 可 用 于 全 局 导航 ， 也 可 放 在 某 个 段落 ， 作 


为 区 域 导 航 。 运 行 代码 ， 效 果 如 图 8-3 所 示 。 


图 8-3 页 面 之 间 导 航 
下 面 的 实例 是 页 内 导航 ， 运 行 代 码 ， 效 果 如 图 8-4 所 示 。 
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</nav> 
<p idq=-p1> 段 一 </p> 
<p id=p2> 段 二 </p> 
<p id=p3> 段 三 </p> 
</article> 
nav 元 素 使 用 在 哪 行 位 置 呢 ? 
项 部 传统 导航 条 。 现 在 主流 网 站 上 都 有 不 同 层级 的 导航 条 ， 其 作用 是 将 当前 画面 跳 转 到 网 
站 的 其 他 主要 页 面 上 去 。 图 8-5 所 示 为 项 部 传统 网 站 导航 条 。 


I EE | 


[CT rr 四 D -0x 项 和 受 使 府 

EL 

A TBT Ww 

文章 的 标题 
| :下 

段 - 
| 及 
| B= 


图 8-4 页 内 导航 图 8-5 ”顶部 传统 网 站 导航 条 
侧 边 导航 。 现 在 很 多 企业 网 站 和 购物 类 网 站 上 都 有 侧 边 导航 ， 图 8-6 所 示 为 左 侧 导 航 。 
页 内 导航 。 页 内 导航 的 作用 是 在 本 页 面 几 个 主要 的 组 成 部 分 之 间 进 行 跳 转 ， 图 8-7 所 示 为 


"TR 下 胡乱 玫 末了 


图 8-6 左 侧 导 航 
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在 HTML 5 中 不 要 用 menu 元 素 代替 nav 元 素 。 过 去 有 很 多 Web 应 用 程序 的 开发 员 喜 欢 用 menu 
元 素 进行 导航 ，menu 元 素 是 用 在 Web 应 用 程序 中 的 。 


中 8.1.4 ”课堂 小 实例 一 一 aside 元 素 一 一 一 一 一 一 一 一 一 一 0 

aside 元 素 用 来 表示 当前 页 面 或 文章 的 附 | 
属 信息 部 分 ， 它 可 以 包含 与 当前 页 面 或 主要 | 
内 容 相关 的 引用 、 例 边栏 、 广 告 、 导 航 条 ， 
以 及 其 他 类 似 的 有 别 于 主要 内 容 的 部 分 。 

aside 元 素 主 要 有 以 下 两 种 使 用 方法 。 
大 ”包含 在 article 元 素 中 作为 主要 内 容 的 附属 ; 

信息 部 分 ， 其 中 的 内 容 可 以 是 与 当前 文章 | 
有 关 的 参考 资料 、 名 词 解释 等。 


蔬 王 本 古 ] 


E C2 
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在 article 元 素 之 外 使 用 作为 页 面 或 站 点 | | 2 
全 局 的 附属 信息 部 分 。 最 典型 的 是 侧 边 ;| “ 笠 寻 
栏 ， 其 中 的 内 容 可 以 是 友情 链接 、 文章 | 下 
列表 、 广 告 单元 等 。 代 码 如 下 所 示 ， 运 | | :器 中 
行 代码 ， 效 果 如 图 8-8 所 示 。 | 


新 增 的 非 主 体 结 构 元 素 


@ 除了 以 上 几 个 主要 的 结构 元 素 之 外 ，HIML 5 内 还 增加 了 一 些 表示 录 
辑 结构 或 附加 信息 的 非 主体 结构 元 素 。 


肯 8.2.1 课堂 小 实例 一 一 header 元 素 
header 元 素 是 一 种 具有 引导 和 导航 作用 | ”在 一 个 网 页 中 可 以 拥有 多 个 header 元 素 ， 
的 结构 元 素 ， 通 常用 来 放置 整个 页 面 或 页 ， 可 以 为 每 个 内 容 区 块 加 一 个 header 元 素 。 
面 内 的 一 个 内 容 区 块 的 标题 ，header 内 也 可 | 
以 包含 其 他 内 容 ， 例 如 表格 、 表 单 或 相关 的 | 
Logo 图 片 。 | 
在 架构 页 面 时 ， 整 个 页 面 的 标题 常 放 在 ; 
页 面 的 开头 ，header 标 签 一 般 都 放 在 页 面 的 项 | 
部 。 可 以 用 如 下 所 示 的 形式 书写 页 面 的 标题 


对 
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在 HTML 5 中 ， 一 个 header 元 素 通常 包括 至 少 一 个 headering 元 素 (hl-h6) ， 也 可 以 包括 
hgroup、nav 等 元 素 。 
下 面 是 一 个 网 页 中 的 header 元 素 使 用 实例 ， 运 行 代码 ， 效 果 如 图 8-9 所 示 。 


ram BD- ox 


HTML+CSS 网 页 制作 与 布局 课堂 实录 


曙 密 甸 绕 网 页 设计 师 在 制作 网 历 过 程 中 的 实际 知 莫 和 应 该 尘 提 的 技术 ， 全 而 介绍 了 使 有 HTYL 
和 CSS 进行 网 员 设 计 和 制作 的 各 方面 内 容 和 技巧 … 


: 于 
小 


=== 一 = 


图 8-9 header 元 素 使 用 实例 

肯 8.2.2 课堂 小 实例 一 一 hgroup 元 素 一 一 一 一 一 一 一 一 一 一 0 

header 元 素 位 于 正文 开头 ， 可 以 在 这 些 元 素 中 添加 <h1> 标 签 ， 用 于 显示 标题 。 基 本 上 ， 
<h1> 标 签 已 经 足够 用 于 创建 文档 各 部 分 的 标题 行 。 但 是 ， 有 时 候 还 需要 添加 副标题 或 其 他 信 
息 ， 以 说 明 网 页 或 各 节 的 内 容 。 

hgroup 元 素 是 将 标题 及 其 子 标 题 进行 分 组 的 元 素 。hgroup 元 素 通常 会 将 h1 一 h6 元 素 进行 分 
组 ， 一 个 内 容 区 块 的 标题 及 其 子 标题 算 一 组 

通常 ， 如 果 文 章 只 有 一 个 主 标题 ， 是 不 需要 heroup 元 素 的 。 但 是 ， 如 果 文 章 有 主 标题 ， 主 
标题 下 有 子 标题 ， 就 需要 使 用 group 元 素 了 。 如 下 所 示 为 hgroup 元 素 实例 代码 ， 运 行 代码 ， 效 
果 如 图 8-10 所 示 。 
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如 果 有 标题 和 副标题 ， 或 在 同一 个 <header> 元 素 中 加 入 多 个 也 标题 ， 那 么 就 需要 使 用 


<hgroup> 元 素 。 


| ~ || 
1 rr re A 
特色 小 吃 
天 津 狗 不 理 包子 
2014 征 月 20 日 


天 津 村 色 小 吃 ， 狗 不 更 包 子 是 不 得 不 操 天 的 ， 狗 不 再 包子 以 其 味 语 群 美 而 誉 满 全 国 ， 名 扬中 外 。 狗 不 再 
子 销 原名 “ 德 聚 号 ”， 距 今 已 有 百 余年 的 历史 。 疝 主 叫 高 顺 友 ， 其 有 名 叫 “ 狗 不 理 ”， 人 们 入 而 勾 之 喊 顺 
全 把 和 包 于 称 作 “多 不 理 包 子 ”， 原 店铺 字号 志 浙 条 注 人 们 六 三 了 。 所 说 ， 奈 世 视 当 自 求 怠 
于 作为 再 品 计 训 吉 坟 吉 博 林 捕 ， 苞 请 很 活 吃 ， 人 人 此 有 于 
Feat 如 今 ， 狗 不 理 电子 已 走向 世界 ， 进 入 许多 国 案 市 场 ， 特 色 小 疙 拘 不 理 和 包子 入 受 宾客 欢 刘 .… 


图 8-10 heroup 元 素 实例 


上 用 8.2.3 课堂 小 实例 一 footer 元 素 一 一 一 一 一 一 一 一 一 一 一 0 
footer 通 常 包 括 其 相关 区 块 的 脚注 信息 ， 如 作者 、 相 关 阅 读 链接 及 版 权 信 息 等 。footer 
元 素 和 header 元 素 使 用 基本 上 一 样 ， 可 以 在 一 个 页 面 中 使 用 多 次 ， 如 果 在 一 个 区 段 后 面 加 
入 footer 元 素 ， 那 么 它 就 相当 于 该 区 段 的 尾部 了 。 
在 HTML 5 出 现 之 前 ， 通 常 使 用 类 似 下 面 这 样 的 代码 来 写 页 面 的 页 脚 : 


在 HIML 5 中 ， 可 以 不 使 用 div， 而 用 更 加 语义 化 的 footer 来 写 : 


138 


HTML 5 的 结构 


footer 元 素 既 可 以 用 作 页 面 整体 的 页 脚 ， 也 可 以 作为 一 个 内 容 区 块 的 结尾 ， 例 如 可 以 将 
<footer> 直 接 写 在 <section> 或 是 <article> 中 ， 如 下 所 示 。 
在 article 元 素 中 添加 footer 元 素 : 


在 section 元 素 中 添加 footer 元 素 : 


虽 8.2.4 课堂 小 实例 一 一 address 元 素 一 一 一 一 一 一 一 一 一 一 0 


address 元 素 通常 位 于 文档 的 未 尾 ，address 元 素 用 来 在 文档 中 呈现 联系 信息 ， 包 括 文档 
创建 者 的 名 字 、 站 点 链接 、 电 子 邮 箱 、 真 实地 址 、 电 话 号 码 等 。address 不 只 是 用 来 呈现 电 
子 邮 箱 或 真实 地 址 这 样 的 “地 址 ”概念 ， 而 应 该 包括 与 文档 创建 人 相关 的 各 类 联系 方式 。 
下 面 是 address 元 素 实 例 。 


浏览 器 中 显示 地 址 的 方式 与 其 周围 的 文档 不 同 ，IE、Firefox 和 Safari 浏 览 器 以 斜体 显示 地 
址 ， 如 图 8-11 所 示 。 


ET 课堂 实录 “ee 一 他 
还 可 以 把 footer 元 素 、time 元 素 与 address 元 素 结合 起 来 使 用 ， 具 体 代码 如 下 。 


在 这 个 示例 中 ， 把 文章 的 作者 信息 放 在 了 address 元 素 中 ， 把 文章 发 表 日 期 放 在 了 time 元 素 
中 ， 把 address 元 素 与 tme 元 素 中 的 总 体内 容 作为 脚注 信息 放 在 了 footer 元 素 中 。 如 图 8-12 所 示 。 


LE 一 E BELTE 9 [全 em 
二 Im ww 一 
| 
图 8-11 address 元 素 实例 图 8-12 footer 元 素 、time 元 素 与 address 元 素 结合 
8 | 课 后 练习 o 
一 、 填 空 题 
(1) 元 素 可 以 包含 独立 的 内 容 项 ， 所 以 可 以 包含 一 个 论坛 帖子 、 一 篇 杂志 
文章 、 一 篇 博客 文章 、 用 户 评论 等 。 
(2) 元 素 在 HTML5 中 用 于 包 豪 一 个 导航 链接 组 ， 用 于 显 式 地 说 明 这 是 一 个 
导航 组 ， 在 同一 个 页 面 中 可 以 同时 存在 多 个 ” _。 
二 、 选 择 题 
(1) 元 素 是 一 种 具有 引导 和 导航 作用 的 结构 元 素 ， 通 常用 来 放置 整个 页 面 或 
页 面 内 的 一 个 内 容 区 块 的 标题 。 
A. address B. header C.aside 
(C2) 通常 包括 其 相关 区 块 的 脚注 信息 ， 如 作者 、 相 关 阅 读 链 接 及 版 权 信息 等 。 
A. hgroup B. address C. footer 
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@ 本 课 主要 讲述 了 新 增 的 主体 结构 元 素 和 新 增 的 非 主体 结构 元 素 。 通 过 
对 本 课 的 学 习 ， 使 读者 认识 了 新 的 结构 性 的 标签 的 标准 ， 让 HTML 文档 更 加 清晰 ， 可 阅读 性 更 
强 ， 更 利于 SEO， 也 更 利于 视 障 人 士 阅读 。 它 通过 一 些 新 标签 ， 新 功能 的 开发 ， 解 决 了 三 大 问 
题 : 浏览 器 兼容 问题 、 文 档 结 构 不 明确 的 问题 、Web 应 用 程序 功能 受 限 等 问题 。 
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本 课 导读 
CSS 是 为 了 简化 Web 页 面 的 更 新 工作 而 诞生 
的 ， 它 使 网 页 变 得 更 加 美观 ， 维 护 更 加 方便 。CSS 在 
网 页 制作 中 起 着 非常 重要 的 作用 ， 对 于 控制 网 页 中 对 
象 的 属性 、 增 加 页 面 中 内 容 的 样式 、 精 确 地 布局 定位 
等 都 发 挥 了 非常 重要 的 作用 ， 是 网 页 设计 师 必须 熟练 
掌握 的 内 容 之 一 。 


技术 要 点 
CSS 3 介绍 
在 HTML 5 中 使 用 CSS 的 方法 
选择 器 类 型 
编辑 和 浏览 CSS 
掌握 对 网 页 添加 CSS 样 式 


第 9 课 
CSS 基 础 知识 
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9 ] CSS 3 介绍 ” 
@ CSS 是 Cascading Style Sheet 的 缩写 ， 又 称 为 “ 层 芭 样式 表 ”， 简 称 为 


样式 表 。 它 是 一 种 制作 网 页 的 新 技术 ， 现 在 已 经 为 大 多 数 浏览 器 所 支持 ， 成 为 网 页 设计 必 不 可 
少 的 工具 之 一 。 


肯 9.1.1 CSS 基 本 概念 


网 页 最 初 是 用 HTML 标 记 来 定义 页 面 文档 及 格式 ， 如 标题 <hl>、 段 落 <p>、 表 格 <table> 等 。 
但 这 些 标记 不 能 满足 更 多 的 文档 样式 需求 ， 为 了 解决 这 个 问题 ， 在 1997 年 W3C 颁 布 HIML 4 标准 
的 同时 ， 也 公布 了 有 关 样 式 表 的 第 一 个 标准 CSS 1， 自 CSS 1 的 版 本 之 后 ， 又 在 1998 年 5 月 发 布 了 
CSS 2 版 本 ， 样 式 表 得 到 了 更 多 的 充实 。 使 用 CSS 能 够 简化 网 页 的 格式 代码 ， 加 快 下 载 显示 的 速 
度 ， 也 减少 了 需要 上 传 的 代码 数量 ， 大 大 减少 了 重复 劳动 的 工作 量 。 

样式 表 首 要 的 目的 是 为 网 页 上 的 元 素 精确 定位 。 其 次 ， 它 把 网 页 上 的 内 容 结构 和 格式 控制 
相 分 离 。 浏 览 者 想 要 看 的 是 网 页 上 的 内 容 结构 ， 而 为 了 让 浏览 者 更 好 地 看 到 这 些 信息 ， 就 要 通 
过 使 用 格式 来 控制 。 内 容 结构 和 格式 控制 相 分 离 ， 使 得 网 页 可 以 仅 由 内 容 构 成 ， 而 将 网 页 的 格 
式 通过 CSS 样 式 表 文件 来 控制 。 

CSS 2.1 发 布 至 今 已 经 有 7 年 的 历史 ， 在 这 7 年 里 ， 互 联网 的 发 展 已 经 发 生 了 翻天 覆 地 的 变 
化 。CSS 2.1 有 时 候 难 以 满足 快速 提高 性 能 、 提 升 用 户 体验 的 Web 应 用 的 需求 。CSS 3 标准 的 出 
现 就 是 增强 CSS 2.1 的 功能 ， 减 少 图 片 的 使 用 次 数 ， 以 及 解决 HTML 页 面 上 的 特殊 效果 。 

在 HTML 5 逐渐 成 为 IT 界 最 热门 话题 的 同时 ，CSS 3 也 开始 慢 慢 地 普及 起 来 。 目 前 ， 很 多 
浏览 器 都 开始 支持 CSS 3 部 分 特性 ， 特 别 是 基于 Webkit 内 核 的 浏览 器 ， 其 支持 力度 非常 大 。 在 
Android 和 iOS 等 移动 平台 下 ， 正 是 由 于 Apple 和 Google 两 家 公司 大 力 推广 HFTML5 及 各 自 的 Web 
浏览 器 的 迅速 发 展 ，CSS 3 在 移动 Web 浏 览 器 下 都 能 得 到 很 好 的 支持 和 应 用 。 

CSS 3 作为 在 HTML 页 面 担任 页 面 布 局 和 页 面 装 饰 的 技术 ， 可 以 更 加 有 效 地 对 页 面 布 局 、 
字体 、 颜 色 、 背 景 或 其 他 动画 效果 实现 精确 的 控制 。 

目前 ，CSS 3 是 移动 Web 开 发 的 主要 技术 之 一 ， 它 在 界面 修饰 方面 占有 重要 的 地 位 。 由 于 
移动 设备 的 Web 浏 览 器 都 支持 CSS 3， 对 于 不 同 浏览 器 之 间 的 兼容 性 问题 ， 它 们 之 间 的 差异 非 
常 小 。 不 过 对 于 移动 Web 浏 览 器 的 某 些 CSS 特 性 ， 仍 然 需要 做 一 些 兼容 性 的 工作 。 


肯 9.1.2 ”CSS 的 优点 


掌握 基于 CSS 的 网 页 布局 方式 ， 是 实现 Web 标 准 的 基础 。 在 网 页 制作 时 采用 CSS 技 术 ， 可 
以 有 效 地 对 页 面 的 布局 、 字 体 、 颜 色 、 背 景 和 其 他 效果 实现 更 加 精确 的 控制 。 只 要 对 相应 的 代 
码 做 一 些 简单 的 修改 ， 就 可 以 改变 网 页 的 外 观 和 格式 。 采 用 CSS 有 以 下 优点 。 
太 ”大 大 缩减 页 面 代码 ， 提 高 页 面 浏览 速度 ， 缩 减 带宽 成 本 。 
太 “结构 清晰 ， 容 易 被 搜索 引擎 搜索 到 。 
六。 缩短 改版 时 间 ， 只 要 简单 的 修改 几 个 CSS 文 件 ， 就 可 以 重新 设计 一 个 有 成 百 上 千 页 面 的 
站 点 。 
强大 的 字体 控制 和 排版 能 力 。 
CSS 非 常 容易 编写 ， 可 以 像 写 html 代 码 一 样 轻松 编写 CSS。 
提高 易 用 性 ， 使 用 CSS 可 以 结构 化 HTML， 如 <p> 标 记 只 用 来 控制 段落 ，heading 标 记 只 用 来 


对 对 对 
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控制 标题 ，table 标 记 只 用 来 表现 格式 化 的 数据 等 。 
友 “表现 和 内 容 相 分 离 ， 将 设计 部 分 分 离 出 来 放 在 一 个 独立 样式 文件 中 。 
太 ”更 方便 搜索 引擎 的 搜索 ， 用 只 包含 结构 化 内 容 的 HTML 代 替 访 套 的 标记 ， 搜 索引 擎 将 更 有 


效 地 搜索 到 内 容 。 


六 table 布局 灵活 性 不 大 ， 只 能 遵循 table、tr、td 的 格式 ， 而 div 可 以 有 各 种 格式 。 


友 ” table 布局 中 ， 垃 圾 代码 会 很 多 ， 一 些 修饰 的 样式 及 布局 的 代码 混合 一 


更 能 体现 样式 和 结构 相 分 离 ， 结 构 的 重 构 性 强 。 


六 ”在 几乎 所 有 的 浏览 器 上 都 可 以 使 用 。 
太 ”以 前 一 些 非得 通过 图 片 转换 实现 的 功能 ， 玫 
载 页 面 。 


可 以 轻松 地 控制 页 面 的 布局 。 


对 对 对 


的 所 有 页 面 都 会 随 之 发 生变 动 。 
咱 9.1.3 CSS 3 功能 


起 ， 很 不 直观 。 而 div 


现在 只 要 用 CSS 就 可 以 轻松 实现 ， 从 而 更 快 地 下 


使 页 面 的 字体 变 得 更 漂亮 ， 更 容易 编排 ， 使 页 面 真正 赏心悦目 。 


可 以 将 许多 网 页 的 风格 格式 同时 更 新 。 不 用 再 一 页 一 页 地 更 新 了 。 可 以 将 站 点 上 所 有 的 网 


页 风格 都 使 用 一 个 CSS 文 件 进行 控制 ， 只 要 修改 这 个 CSS 文 件 中 相应 的 行 ， 那 么 整个 站 点 


CSS 即 层 替 样式 表 (Cascading Stylesheet) 。 在 网 页 制作 时 采用 CSS 技 术 ， 可 以 有 效 地 对 页 


面 的 布局 、 字 体 、 颜 色 、 背 景 和 其 他 效果 实现 更 加 精确 的 控制 。 只 要 对 相应 的 代码 做 一 些 简单 


的 修改 ， 就 可 以 改变 同一 页 面 的 不 同 部 分 ， 或 者 页 数 不 同 的 网 页 的 外 观 和 格式 。CSS 3 是 CSS 

技术 的 升级 版 本 ，CSS 3 语言 开发 是 朝 着 模块 化 发 展 的 。 以 前 的 规范 作为 一 个 模块 实在 是 太 庞 

大 而 且 比较 复杂 ， 所 以 ， 把 它 分 解 为 一 些小 的 模块 ， 更 多 新 的 模块 也 被 加 入 进来 。 这 些 模块 包 

括 : 盒子 模型 、 列 表 模块 、 超 链接 方式 、 语 言 模块 、 背 景 和 边框 、 文 字 特 效 、 多 栏 布 
例如 下 面 图 9-1 和 图 9-2 所 示 的 网 页 分 别 为 使 用 CSS 前 后 的 效果 。 
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图 9-1 使 用 CSS 前 


Fd Ea rag meh 


过 于 


重生] 时 只 点 圭 主 泊 病 
Sr WR EAE 
9 本 和 守卫 区 2 
Ee ， 
和 
2000E 


Se ded 
ETE 


图 9-2 使 用 CSS 后 


局 等 


用 9.1.4 CSS 3 发 展 历史 
从 1990 年 HTML 被 发 明 开始 ， 样 式 表 就 以 


自 的 样式 语言 ， 读 者 可 以 使 用 这 些 样 式 语言 来 


性 ， 读 者 来 决定 网 页 应 该 怎样 被 显示 。 


没有 意义 了 。 
1.CSS 1 


议 上 第 一 次 展示 了 CSS 的 建议 。 


1996 年 12 月 发 表 的 CSS 1 的 要 求 有 (W3C | 
| 制订， 直到 2011 年 6 月 7 日 。 
| 4.css4 


管理 CSS 1 要 求 ) 如 下 内 容 。 

支持 字体 的 大 小 、 字 形 、 强 调 。 
支持 字 的 颜色 、 背 景 的 颜色 和 其 他 元 素 。 
支持 文章 特征 如 字母 、 词 和 行 之 间 的 距离 。 
支持 文字 的 排列 、 图 像 、 表 格 和 其 他 元 素 。 


站 对 对 对 


于 1994 年 ， 哈 坤 * 利 和 伯 特 * 波 斯 合作 设 ， 3. CSS 3 


计 CSS。 他 们 在 1994 年 首次 在 芝加哥 的 一 次 会 | 
| 而 每 一 个 “modules” 都 有 于 CSS 2 中 额外 增加 的 


@ 一 o 


| 妇 “支持 边缘 、 围 框 和 其 他 关于 排版 的 元 素 。 
各 种 形式 出 现 了 ， 不 同 的 浏览 器 结合 了 它们 各 ， 
| TOS 2 
调节 网 页 的 显示 方式 。 一 开始 样式 表 是 给 读者 | 
用 的 ， 最 初 的 HTML 版 本 只 含有 很 少 的 显示 属 ，Css ?要 求 ) ， 其 中 包括 新 的 内 容 如 下 所 述 。 


| 妇 绝对 的 、 相 对 的 和 固定 的 定 比特 素 、 
但 随 着 HTML 的 成 长 ， 为 了 满足 设计 师 | 绝对 的 、 相 对 的 和 固定 的 定 比 特 素 、 媒 体 
的 要 求 ，HTML 获 得 了 很 多 显示 功能 。 随 着 这 ; 


些 功能 的 增加 ， 外 来 定义 样式 的 语言 越 来 越 | 太 CSS 2.1 修 改 了 CSS 2 中 的 一 些 错误 ， 删 除 


友 支持 id 和 class。 


1998 年 5 月 W3C 发 表 了 CSS 2 (W3C 管 理 


型 的 概念 、 双 向 文件 和 一 个 新 的 字体 。 


了 其 中 基本 不 被 支持 的 内 容 ， 并 增加 了 
一 些 已 有 的 浏览 器 的 扩展 内 容 。 


CSS 3 分 成 了 不 同类 型 ， 称 为 “modules”。 


功能 ， 以 及 向 后 兼容 。CSS 3 早 于 1999 年 已 开始 


W3C 于 2011 年 9 月 29 日 开始 了 设计 CSS 4。 


| 直至 现时 只 有 极 少数 的 功能 被 部 分 网 页 浏览 器 
| 支持 。 


在 HTML 5 中 使 用 CSS 的 方法 o 


@ 添加 CSS 有 4 种 方法 : 内 赃 样 式 、 行 内 样式 、 链 接 样式 和 导入 样式 


表 ， 下 面 分 别 介绍 。 


旧 9.2.1 行内 样式 
行内 样式 是 混合 在 HTML 标 记 里 使 用 的 ， 


相当 于 在 样式 表 大 括号 里 的 内 容 。 
基本 语法 : 


语法 说 明 : 
友 ”标记 : HIML 标 记 ， 如 body、table、p 等 。 
友 ”标记 的 style 定 义 只 能 影响 标记 本 身 。 


| 妆 style 的 多 个 属性 之 间 用 分 号 分 隔 。 
用 这 种 方法 ， 可 以 很 简单 地 对 某 个 元 素 单独 定 ， 
义 样 式 。 行 内 样式 的 使 用 是 直接 在 HIML 标 记 | 
里 添加 style 参 数 ， 而 style 参 数 的 内 容 就 是 CSS : 
的 属性 和 值 ， 在 style 参 数 后 面 的 引号 里 的 内 容 | 


太 ”标记 本 身 定义 的 style 优 先 于 其 他 所 有 样式 
定义 。 
虽然 这 种 方法 比较 直接 ， 在 制作 页 面 的 
时 候 需 要 为 很 多 的 标签 设置 style 属 性 ， 所 以 


| 会 导致 HTML 页 面 不 够 纯净 ， 文 件 体积 过 大 ， 
| 不 利于 搜索 引擎 ， 从 而 导致 后 期 维护 成 本 


因此 不 推荐 使 用 


下 面 是 一 个 行内 样式 的 定义 ， 如 : 
<table style=color:red; margin-right: 120px> 
这 是 个 表格 
</p> 
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用 9.2.2 内藤 样式 一 一 一 一 | 


这 种 CSS 一 般 位 于 HIMIL 文 件 的 头 部 ， 


即 <head> 与 </head> 标 签 内 ， 并 且 以 <style> 开 | 
始 ， 以 </style> 结 束 。 内 戏 样 式 允许 在 它们 所 | 
应 用 的 HTML 文 档 的 项 部 设置 样式 ， 然 后 在 整 
个 HTML 文 件 中 直接 调用 该 样式 ， 这 些 定义 的 


,I9.2.3 链接 样式 


样式 就 应 用 到 页 面 中 了 。 
基本 语法 : 


语法 说 明 : 
太 <style> 是 用 来 说 明 所 要 定义 的 样式 ，type 


属性 是 指 以 CSS 的 语法 定义 。 


太 <!--… -> 隐藏 标记 : 避免 了 因 浏 览 器 不 | 


支持 CSS 而 导致 错误 ， 加 上 这 些 标记 后 ， 


容 ， 避 免 一 些 错误 。 


可 以 作为 选择 符 。 
太 样式 属性 如 果 需 要 对 一 个 选择 符 指定 多 


个 属性 时 ， 使 用 分 号 将 所 有 的 属性 和 值 ; 


分 开 。 
太 ”属性 值 设置 是 对 应 属性 的 值 。 


广 样 式 。 
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下 面 实例 就 是 使 用 <style> 标 记 创建 的 内 
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链接 外 部 样式 表 就 是 在 网 页 中 调用 已 经 


| 定义 好 的 样式 表 来 实现 样式 表 的 应 用 ， 它 是 
| 一 个 单独 的 文件 ， 然 后 在 页 面 中 用 <link> 标 记 
;链接 到 这 个 样式 表 文件 ， 这 个 <link> 标 记 必须 
| 放 到 页 面 的 <head> 区 内 。 这 种 方法 最 适合 
| 型 网 站 的 CSS 样 式 定义 。 


基本 语法 : 


语法 说 明 : 


| 太 ”链接 外 部 样式 表 时 ， 不 需要 使 用 style 元 素 ， 


只 需 直接 用 <link> 标 记 放 在 <head> 标 记 中 就 
可 以 了 。 


不 支持 CSS 的 浏览 器 ， 会 自动 跳 过 此 段 内 | 女 同样 外 部 样式 表 的 文件 名 称 是 要 嵌入 的 


样式 表 文件 名 称 ， 后 缀 为 .css。 


大 选择 符 1.… 选 择 符 n， 选择 符 可 以 使 用 | 太 CSS 文 件 一 定 是 纯 文 本 格式 。 


HTML 标 记 的 名 称 ， 所 有 的 HTML 标 记 都 ， 


六 在 修改 外 部 样式 表 时 ， 引 用 它 的 所 有 外 
部 页 面 也 会 自动 地 更 新 。 


”大 外 部 样式 表 中 的 URL 相 对 于 样式 表 文件 


在 服务 器 上 的 位 置 。 


| 妇 ”外 部 样式 表 优先 级 低 于 内 部 样式 表 。 
| 妇 可 以 同时 链接 几 个 样式 表 ， 靠 后 的 样式 
表 优先 于 靠 前 的 样式 表 。 


链接 方式 是 使 用 频率 最 高 、 最 实用 的 


| 方式， 一 个 链接 样式 表 文 件 可 以 应 用 于 多 
| 个 页 面 。 当 改变 这 个 样式 表 文 件 时 ， 所 有 
”应 用 该 样式 的 页 面 都 随 着 改变 。 在 制作 大 
| 量 相同 样式 页 面 的 网 站 时 ， 链 接 样式 表 非 


常 有 用 ， 不 仅 减少 了 重复 的 工作 量 ， 而 且 | 


有 利于 以 后 的 修改 、 编 辑 ， 浏 
了 重复 下 载 代码 。 
下 面 是 一 个 链接 外 部 样式 表 实 例 。 


上 面 这 个 例子 表示 浏 
件 中 以 文档 格式 读 出 定义 的 样式 表 。 
stylesheet” 
表 ，“type=text/css 
表 文 件 ， 
位 置 。 

这 种 方式 将 HTML 文 件 和 CSS 文 件 彻底 分 
成 两 个 或 者 多 个 文件 ， 实 现 了 页 面 框架 HTML 
代码 与 美工 CSS 代 码 的 完全 分 离 ， 使 得 前 期 制 
作 和 后 期 维护 都 十 分 方便 ， 并 且 如 果 要 保持 
页 面 风格 统一 ， 只 需要 把 这 些 公共 的 CSS 文 件 
单独 保存 成 一 个 文件 ， 其 他 的 页 面 就 可 以 分 
别 调用 自身 的 CSS 文 件 ， 如 果 需 要 改变 网 站 风 
格 ， 只 需要 修改 公共 CSS 文 件 就 可 以 了 ， 相 当 
方便 。 


用 9.2.4 导入 样式 
导入 外 部 样式 表 是 指 在 内 部 样式 表 的 
<style> 里 导入 一 个 外 部 样式 表 ， 导 入 时 用 
@import。 
基本 语法 : 


9 旦 


旧 文 件 的 类 型 是 样式 


“href=slstyle.css” 


语法 说 明 : 
import 语 句 后 的 “;” 一 定 要 加 上 ! 


表 文件 名 称 ， 后 级 为 .css。 


式 规则 前 面 。 


览 器 从 slstyle.css 文 | 


汉人 区 昌 科 区 | 径 、 方 法 和 链接 样式 表 的 方法 类 似 ， 但 导入 


是 文件 的 名 称 和 | 相当 于 存在 内 部 样式 表 中 的 。 


9.2.5 ”优先 级 问题 


@import 应 该 放 在 style 元 素 的 任何 其 他 样 | 


览 时 也 减少 | 


“rel= ;| 


下 面 是 一 个 导入 外 部 样式 表 实 例 。 


此 例 中 “@import style.css” 表 示 导 入 


; style.css 样 式 表 ， 注 意 使 用 时 外 部 样式 表 的 路 


; 外 部 样式 表 输入 方式 更 有 优势 。 实 质 上 它 是 


如 果 这 上 面 的 4 种 方式 中 的 两 种 用 于 同 
一 个 页 面 后 ， 就 会 出 现 优先 级 的 问题 。 

4 种 样式 的 优先 级 别 是 〈 从 高 至 低 ) : 行 
样式 、 内 岩 样 式 、 链 接 外 部 样式 、 导 入 样式 。 

例如 ， 链 接 外 部 样式 表 拥有 针对 h3 选 择 
器 的 3 个 属性 : 


内 


而 内 谱 样 式 表 拥有 针对 b3 选 择 器 的 两 个 属性 : 


假如 拥有 内 访 样 式 表 的 这 个 页 面 同时 链 


| 接 外 部 样式 ， 那 么 h3 得 到 的 样式 是 : 


once 


即 颜 色 属 性 将 被 继承 于 外 部 样式 表 ， 
: 而 文字 排列 (text-align〉 和 字体 尺寸 (font- 
i size) 会 被 内 嵌 样 式 表 中 的 样式 取代 。 
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9.3.1 


选择 器 类 型 


“ee 一 个 


择 器 (selector) 是 CSS 中 很 重要 的 概念 ， 所 有 HTML 语 言 中 的 标 
A er oe 用 户 只 
制 ， ee 即 可 实现 各 种 效果 。 在 CSS 中 ， 有 各 种 不 同类 型 的 选择 器 ， 基 本 选 
择 器 有 标签 选择 器 、 类 选择 器 和 ID 选择 器 3 种 ， 下 面 详细 介绍 


需要 通过 选择 器 对 不 同 的 HTML 标签 进行 控 


课堂 小 实例 一 一 标签 选择 器 


oa 组 成 。 标 签 选择 器 是 直接 将 HTML 标 签 作为 选 


择 器 ， 可 以 是 p、hl1、dl、strong 等 HTML 标 签 。 例 
<p> 标 签 的 样式 风格 。 


在 后 期 维护 中 ， 


pt 
font-size:14px; 
color:093; 

} 


如 P 选 择 器 ， 下 面 就 是 用 于 声明 页 面 中 所 有 


以 上 这 段 代码 声明 了 页 面 中 所 有 的 p 标 签 ， 文字 大 小 均 是 14px， 颜 色 为 #093( 绿 色 ) ， 这 


这 么 容易 ! 
每 一 个 CSS 选 择 器 都 包含 了 选择 器 本 身 、 属 性 和 值 ， 其 中 属性 和 值 可 以 设置 多 个 ， 从 而 实 
现 对 同一 个 标签 声明 多 种 样式 风格 ， 如 图 9-3 所 示 。 


色 时 ， 则 页 面 9 
蓝 色 ， 则 仅 依靠 标记 选择 


如 果 想 改变 整个 网 站 中 p 标 签 文字 的 颜色 ， 只 需要 修改 color 属 性 就 可 以 了 ， 就 


夯 避 夯 避 { | color:093 ; 


font-size:14 px; 


md 


图 9-3 ”CSS 标签 选择 器 


用 9.3.2 课堂 小 实例 一 类 选择 器 
类 选择 器 能 够 把 相同 的 元 素 分 类 定义 成 不 同 的 样式 ， 对 XHTML 标 签 均 可 以 使 用 
“class=""” 的 形式 对 类 进行 名 称 指派 。 定 义 类 型 选择 器 时 ， 在 自 定义 类 的 名 称 前 面 要 加 一 个 


%» 号 


Rm 


标记 选择 器 一 旦 声明 ， 则 页 面 中 所 有 该 标记 都 会 相应 地 产生 变化 ， 如 声明 了 <p> 标 记 为 红 


时 ， 在 自 定义 类 的 名 称 前 面 要 加 一 个 “.” 号 
类 选择 器 的 名 称 可 以 由 用 户 自 定义 ， 属 性 和 值 跟 标 记 选 择 器 一 样 ， 也 必须 符合 CSS 规 范 ， 
如 图 9-4 所 示 。 


148 


ph 所 有 的 <p> 标 记 都 将 显示 为 红色 ， 如 果 希 望 其 中 的 某 一 个 标记 不 是 红色 ， 而 是 
器 是 远 远 不 够 的 ， 所 以 还 需要 引入 类 (class) 选择 器 。 定 义 类 选择 器 


图 9-4 CSS 类 选择 器 


例如 ， 当 页 面 同时 出 现 3 个 <P> 标 签 时 ， } 字体 大 小 ， 而 且 任何 一 个 class 选 择 器 都 适用 
如 果 想 让 它们 的 颜色 各 不 相同 ， 就 可 以 通过 ; 于 所 有 HTML 标 记 ， 只 需要 用 HTML 标 记 的 
设置 不 同 的 class 选 择 器 来 实现 。 一 个 完整 的 class 属 性 声明 即 可 ， 例 如 <H3> 标 记 同样 适 用 
案例 如 下 所 示 。 | 了 .green 这 个 类 别 。 


图 9-5 类 选择 器 实例 
| ”从 上 面 的 例子 仔细 观察 还 会 发 现 ， 最 后 
| 一 行 <H3> 标 记 显示 效果 为 粗 字 ， 这 是 因为 在 
| 没有 定义 字体 的 粗细 属性 的 情况 下 ， 浏 览 器 
; 采用 默认 的 显示 方式 ，<P> 默 认为 正常 粗细 ， 
其 显示 效果 如 图 9-5 所 示 。 从 图 中 可 以 看 | <H3> 默 认为 粗 字体 。 
到 两 个 <P> 标 记分 别 呈 现 出 了 不 同 的 颜色 和 | 


人 性 9.3.3 ”课堂 小 实例 一 -ID 选择 器 

在 HTML 页 面 中 1D 参数 指定 了 菜 一 个 元 素 ，ID 选 择 器 是 用 来 对 这 个 单一 元 素 定义 单独 的 样 
式 。 对 于 一 个 网 页 而 言 ， 其 中 的 每 一 个 标签 均 可 以 使 用 “id-"” 的 形式 对 id 属性 进行 名 称 的 指 
派 。ID 可 以 理解 为 一 个 标识 ， 没 个 标识 只 能 用 一 次 。 在 定义 ID 选择 器 时 ， 要 在 ID 名 称 前 加 上 
人 县 5 

ID 选择 器 的 使 用 方法 跟 class 选 择 器 基本 相同 ， 不 同 之 处 在 于 上 选择 器 只 能 在 HIML 页 面 中 使 
用 一 次 ， 因 此 其 针对 性 更 强 。 在 HTML 的 标记 中 只 需要 利用 id 属性 ， 就 可 以 直接 调用 CSS 中 的 ID 
选择 器 ， 其 格式 如 图 9-6 所 示 。 
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ET 课堂 实录 


PT 


#1d 


color: yellow; 


font-size: 30px; 和 


下 面 举 一 个 实际 案例 ， 其 代码 如 下 。 


bbb 


图 9-6 ID 选择 器 
类 选择 器 和 ID 选择 器 一 般 情 况 下 是 区 分 大 小 写 的 。 这 取决 于 文档 的 语言 。HIML 和 XHTML 将 


类 和 ID 值 定 义 为 区 分 大 小 写 ， 所 以 类 和 卫 值 的 大 小 写 必 须 与 文档 中 的 相应 值 匹配 。 


显示 效果 如 图 9-7 所 示 ， 第 2 行 与 第 3 行 


| 都 显示 CSS 的 方案 。 可 以 看 出 ， 在 很 多 浏览 
| 器 下 ，ID 选 择 器 可 以 用 于 多 个 标记 ， 即 每 个 
| 标记 定义 的 id 不 只 是 CSS 可 调用 ，JavaScript 
| 等 其 他 脚本 语言 同样 也 可 以 调用 。 因 为 这 
| 个 特性 ， 所 以 不 要 将 ID 选择 器 用 于 多 个 标 
| 记 ， 和 否则 会 出 现 意 想不到 的 错误 。 如 果 一 
| 个 HTML 中 有 两 个 相同 的 id 标记 ， 那 么 将 会 
| 导致 TavaScript 在 查找 id 时 出 错 ， 例 如 函数 
| getElementById()。 


ID 选 择 器 2 
ID 选 择 器 3 


TD 选择 下 3 


_ 两 100% ~ 


图 9-7 ID 选择 器 实例 
正 因为 JavaScript 等 脚本 语言 也 能 调用 


;HTML 中 设置 的 id， 所 以 ID 选择 器 一 直 被 广泛 
| 地 使 用 。 网 站 建设 者 在 编写 CSS 代 码 时， 应 该 
| 养 成 良好 的 编写 习惯 ， 一 个 id 最 多 只 能 赋予 一 
| 个 HTML 标 记 。 


@ 6。 第 9 课 SET 


另外 从 图 9-7 可 以 看 到 ， 最 后 一 行 没有 任何 CSS 样 式 风格 显示 ， 这 意味 着 人 选择 器 不 支持 像 class 选 
择 器 那样 的 多 风格 同时 使 用 ， 类 似 “id-"one two"” 这 样 的 写法 是 完全 错误 的 语法 。 


编辑 和 浏览 CSS 


@ CSS 的 文件 与 HTML 文 件 一 样 ， 都 是 纯 文本 文件 ， 因 此 一 般 的 文字 处 
理 软件 都 可 以 对 CSS 进 行 编辑 。 记 事 本 和 Dreamweaver 等 最 常用 的 文本 编辑 工具 对 CSS 的 初学 者 
都 很 有 帮助 。 


且 9.4.1 手工 编写 CSS 
CSS 是 内 嵌 在 HTML 文 档 内 的 。 所 以 ，。 [EeeEEES 


Ee EE Ey 帮助 (H) 一 
编写 CSS 的 方法 和 编写 HTML 文档 的 方法 是 一 和 FONT-FANILY: Arial, Helvetica, sans-serif . | 
样 的 和 可 以 用 任何 一 种 文本 编辑 工具 来 编写 E t FONT-FANILY: Arial, Helvetica, sans-serif 
CSS。 如 Windows 下 的 记事 本 和 写字 板 可 以 用 加 b FONT-FANILY: Arial, Helvetica, sans-serif | 
来 编辑 CSS 文 档 。 图 9-8 所 示 为 在 记事 本 中 手 | ( 

工 编写 CSS。 i 
} 


FONT-SIZ5: 12px，COLOR: #ffffff，FONT-FANILY: “宋体 | 


FONT-SIZE: 12px, COLOR: #666666,FONT-FANILY; “宋体 “TEXT-DI 


Nl 


图 9-8 在 记事 本 中 手工 编写 CSS 


中 9.4.2 Dreamweaver 编 写 CSS 


Dreamweaver CC 提供 了 对 CSS 的 全 面 支持 ， 在 Dreamweaver 中 可 以 方便 地 创建 和 应 用 CSS 
样式 表 ， 设 置 样式 表 属 性 。 

要 在 Dreamweaver 中 添加 CSS 语 法 ， 先 在 Dreamweaver 的 主 界面 中 ， 将 编辑 界面 切换 成 “ 拆 
分 ”视图 ， 使 用 “ 拆 分 ”视图 能 同时 查看 代码 和 设计 效果 。 编 辑 语法 在 “代码 ”视图 中 进行 。 

Dreamweaver 这 款 专 业 的 网 页 设计 软件 在 代码 模式 下 对 HMTL、CSS 和 JavaScript 等 代码 有 
着 非常 好 的 语法 着 色 及 语法 提示 功能 ， 对 CSS 的 学 习 很 有 帮助 。 

在 Dreamweaver 编 辑 器 中 ， 对 于 CSS 代 码 ， 在 默认 情况 下 都 采用 粉红 色 进 行 语法 着 色 ， 而 
HTML 代 码 中 的 标记 则 是 蓝 色 ， 正 文 内 容 在 默认 情况 下 为 黑色 。 而 且 对 于 每 行 代 码 ， 前 面 都 有 
行 号 进行 标记 ， 方 便 对 代码 的 整体 规划 。 

无 论 是 CSS 代 码 还 是 HIML 代 码 ， 都 有 很 好 的 语法 提示 。 在 编写 具体 CSS 代 码 时 ， 按 回 车 
键 或 空格 键 都 可 以 触发 语法 提示 。 例 如 ， 当 光标 移动 到 “color :#000000:” 一 句 的 末尾 时 ， 按 
空格 键 或 者 回 车 键 ， 都 可 以 触发 语法 提示 的 功能 。 如 图 9-9 所 示 ，Dreamweaver 会 列 出 所 有 可 以 
供 选择 的 CSS 样 式 属 性 ， 方 便 设 计 者 快速 进行 选择 ， 从 而 提高 工作 效率 。 

当 已 经 选 定 某 个 CSS 样 式 ， 例 如 上 例 中 的 color 样 式 ， 在 其 冒号 后 面 再 按 空格 键 时 ， 
Dreamweaver 会 弹出 新 的 详细 提示 框 ， 让 用 户 对 相应 CSS 的 值 进行 直接 选择 。 图 9-10 所 示 调 色 板 
就 是 其 中 的 一 种 情况 。 
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ET 


FTT WT TT 


图 9-9 ”代码 提示 图 9-10 调 色 板 


使 用 Dreamweaver 设 置 CSS 样 式 © 


@ 控制 网 页 元 素 外 观 的 CSS 样 式 用 来 定义 字体 、 颜 色 、 边 距 和 字 间 距 等 
属性 ， 可 以 使 用 Dreamweaver 来 对 所 有 的 CSS 属 性 进行 设置 。CSS 属 性 被 分 为 9 大 类 : 类 型 、 背 
景 、 区 块 、 方 框 、 边 框 、 列 表 、 定 位 、 扩 展 和 过 滤 ， 下 面 分 别 进行 介绍 。 


肯 9.5.1 设置 文本 样式 


在 Dreamweaver 的 CSS 样 式 定 义 对 话 框 左 boay 的 CS5 烛 则 定义 


侧 的 “分 类 ”列表 框 中 选择 “类 型 ”选项 ，。 | 衣 一 

在 右 侧 可 以 设置 CSS 样 式 的 类 型 参数 ， 如 图 | es : 
9-11 所 示 。 可 以 改变 文本 的 颜色 、 文 本 字号 、 | 和 全 | 
对 齐 文本 、 装 饰 文本 、 行 高 等 。 so etn er 


图 9-11 选择 “类 型 ”选项 


在 CSS 的 “类 型 ”中 各 选项 参数 如 下 。 

Font-family: 用 于 设置 当前 样式 所 使 用 的 字体 。 

Font-size: 定义 文本 大 小 。 可 以 通过 选择 数字 和 度量 单位 来 选择 特定 的 大 小 ， 也 可 以 选择 相对 大 小 。 
Font-style: 将 “正常 ”、“ 和 斜体 ”或 “ 偏 儿 体 ” 指 定 为 字体 样式 。 默 认 设 置 是 “正常 ”。 

Line-height: 设置 文本 所 在 行 的 高 度 。 该 设置 传统 上 称 为 “前 导 ”。 选 择 “ 正 常 ”自动 计算 字体 大 小 的 
行 高 ， 或 输入 一 个 确切 的 值 ， 并 选择 一 种 度量 单位 。 


Text-decoration: 向 文本 中 添加 下 划 线 、 上 划 线 或 删除 线 ， 或 使 文本 闪烁 。 正 常 文本 的 默认 设置 是 
“无 ”。“ 链 接 ” 的 默认 设置 是 “下 划 线 ”。 将 “链接 ”设置 为 “无 ”时 ， 可 以 通过 定义 一 个 特殊 的 类 
删除 链接 中 的 下 划 线 。 

Font-weight， 对 字体 应 用 特定 或 相对 的 粗 体 量 。“ 正 常 ” 等 于 400，“ 粗 体 ” 等 于 700。 

Font-variant: 设置 文本 的 小 型 大 写字 母 变量 。Dreamweaver 不 在 文档 窗口 中 显示 该 属性 。 

Text-transform: 将 选 定 内 容 中 的 每 个 单词 的 首 字母 大 写 ， 或 将 文本 设置 为 全 部 大 写 或 小 写 。 

color: 设置 文本 颜色 。 
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下 面 是 一 个 简单 的 设置 网 页 文本 颜色 的 实例 ， 代 码 如 下 所 示 。 


这 段 代码 定义 了 文本 的 样式 ， 其 CSS“ 类 型 ”设置 如 图 9-12 所 示 ， 在 浏览 器 中 的 网 页 效果 
如 图 9-13 所 示 。 


一 mindews Internet Fxplorer [SET 


ET isT| 
医 荆 TREE TELTT 
FE EE | 
Foot-Ewiy@) 全 入 
rarataegl Bet) 
Funt-stasC) nomal | ontrwariant GD- 
ioeMigt 国 tl): 
Tost-deeoe sien D): Boeliae et | 
口 weaimg) 
口 line-throsth gd 
口 manxg 
口 wem 
Cw CD 
图 9-12 CSS“ 类 型 ”设置 图 9-13 设置 CSS 文 本 样式 实例 


虽 9.5.2 设置 背景 样式 一 一 一 一 一 一 一 一 一 一 一 一 一 一 0 


使 用 “CSS 规则 定义 ”对 话 框 的 “背景 ”类 别 可 以 定义 CSS 样 式 的 背景 设置 。 可 以 对 网 页 
中 的 任何 元 素 应 用 背景 属性 ， 如 图 9-14 所 示 。CSS 人 允许 应 用 纯色 作为 背景 ， 也 允许 使 用 背景 图 
像 创 建 相当 复杂 的 效果 。 可 以 为 所 有 元 素 设 置 背 景色 ， 这 包括 body 一 直到 em 和 a 等 行内 元 素 。 


153 


下 广 堂 实录 ~e®@ 


在 CSS 的 “背景 ”中 各 选项 参数 如 下 。 

Background-color: 设置 元 素 的 背景 颜色 。 

Background-image: 设置 元 素 的 背景 图 像 。 可 以 直接 输入 图 像 的 路 径 和 文件 ， 也 可 以 单 击 “ 浏 览 ” 按 钮 
选择 图 像 文件 。 


Background Repeat: 确定 是 否 重复 以 及 如 何 重 复 背 景 图 像 。 包 含 4 个 选项 : “不 重复 ” 指 在 元 素 开始 处 显 
示 一 次 图 像 ，“ 重 复 ” 指 在 元 素 的 后 面 水 平和 垂直 平 铺 图 像 ， “横向 重复 ”和 “纵向 重复 ”分 别 显示 图 
像 的 水 平 带 区 和 垂直 带 区 。 图 像 被 剪辑 以 适合 元 素 的 边界 。 

Background Attachment: 确定 背景 图 像 是 固定 在 它 的 原始 位 置 还 是 随 内 容 一 起 滚动 。 

Background Position (X) 和 Background Position (Y): 指定 背景 图 像 相 对 于 元 素 的 初始 位 置 ， 这 可 以 用 于 将 背 
景 图 像 与 页 面 中 心 垂直 和 水 平 对 齐 。 如 果 附 件 属性 为 “固定 ”， 则 位 置 相对 于 文档 窗口 而 不 是 元 素 。 


下 面 是 一 个 简单 的 设置 网 页 元 素 背景 颜色 实例 ， 代 码 如 下 所 示 。 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 设 置 网 页 的 背景 </title> 

</head> 

<style type="text/css"> 

body {background-color: yellow} 

hl {background-color: #00ff00} 

h2 {background-color: transparent} 

p {background-color: rgb(250,0,255)} 

P.no2 {background-color: gray; padding: 20px;} 
</style> 

</head> 

<body> 

<h1> 这 是 标题 1， 背 景 颜色 为 绿色 </h1> 
<h2> 这 是 标题 2， 背 景 颜色 为 整个 网 页 的 背景 颜色 </h2> 
<p> 这 是 段落 ， 背 景 颜 色 为 粉色 </p> 

< 中 class-"no2"> 这 个 段 窒 8 团 了 内 加 E 背 里 频 名 为 区 色 。</e> 
</body> 

</html> 


这 段 代 码 为 不 同 的 元 素 设置 了 不 同 的 背景 颜色 ， 在 浏览 器 中 的 网 页 效果 如 图 9-15 所 示 。 


boay 的 CSS 规则 定义 


Baeckground-color C): 站 文件 中” 电 涪 外 下 者 站 ”中 于 天 办 工具 中 过 区 @ 


请 'rRR 。 外 设 本 FR 的 寺 录 


图 9-14 选择 “背景 ”选项 图 9-15 设置 背景 颜色 
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月 9.5.3 ”设置 区 块 样式 一 


使 用 “CSS 规 则 定义 ”对 话 框 的 “区 块 ” _ 区 | 
类 别 ， 可 以 定义 标签 和 属性 的 间距 和 对 齐 设 
置 ， 在 对 话 框 中 左 侧 的 “分 类 ”列表 中 选择 
“区 块 ” 选 项 ， 在 右 侧 可 以 设置 相应 的 CSS 样 
式 ， 如 图 9-16 所 示 。 


[ 栈 陨 [mW | 


图 9-16 选择 “区 块 ” 选项 


在 CSS 的 “区 块 ” 中 各 选项 参数 如 下 。 

Word-spacing: 设置 单词 的 间距 ， 若 要 设置 特定 的 值 ， 在 下 拉 列 表 框 中 选择 “ 值 ”选项 ， 然 后 输入 一 个 
数值 ， 在 第 二 个 下 拉 列表 框 中 选择 度量 单位 。 

Letter-spacing; 增加 或 碱 小 字母 或 字符 的 间距 。 若 要 减少 字符 间距 ， 指 定 一 个 负 值 ， 字 母 间距 设置 徐 
盖 对 齐 的 文本 设置 。 

Vertical-align: 指定 应 用 它 的 元 素 的 重 直 对 齐 方式 。 仅 当 应 用 于 <img> 标 签 时 ，Dreamweaver 才 在 文档 
窗口 中 显示 该 属性 。 


Text-align; 设置 元 素 中 的 文本 对 齐 方式 。 

Text-indent: 指定 第 一 行文 本 缩 进 的 程度 。 可 以 使 用 负 值 创建 凸 出 ， 但 显示 取决 于 浏览 器 。 仅 当 标签 应 
用 于 块 级 元 素 时 ，Dreamweaver 才 在 文档 窗口 中 显示 该 属性 。 

White-space: 确定 如 何 处 理 元 素 中 的 空白 。 从 下 面 3 个 选项 中 选择 : “正常 ” 指 收缩 空白 ; “保留 ”的 
处 理 方式 与 文本 被 括 在 <pre> 标 签 中 一 样 〈 即 保留 所 有 空白 ， 包 括 空格 、 制 表 待 和 回 车 ) ; “不 换行 ” 
指定 仅 当 遇 到 <br> 标 签 时 文本 才 换 行 。Dreamweaver 不 在 文档 窗口 中 显示 该 属性 。 

Display: 指定 是 否 以 及 如 何 显示 元 素 。 


下 面 是 一 个 增加 段落 中 单词 间 的 距离 实例 ， 代 码 如 下 所 示 。 
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| 同 课堂 实录 


这 段 代码 设置 了 不 同 的 单词 间 的 距离 ， 
在 浏览 器 中 的 网 页 效果 如 图 9-17 所 示 。 


We are rco busy erowing up yet we frrget that they are already grrwing old 


图 9-17 设置 单词 间 的 距离 


侦 9.5.4 设置 方 框 样式 
“CSS 规 则 定义 ”对 话 框 的 “ 方 框 ” 类 

别 可 以 为 控制 元 素 在 页 面 上 的 放置 方式 的 标 
签 和 属性 定义 设置 。 可 以 在 应 用 填充 和 边 距 
设置 时 ， 将 设置 应 用 于 元 素 的 各 个 边 ， 也 可 
以 使 用 “全 部 相同 ”设置 将 相同 的 设置 应 用 
于 元 素 的 所 有 边 。 

CSS 的 “ 方 框 ”类 别 可 以 为 控制 元 素 在 
页 面 上 的 放置 方式 的 标签 和 属性 定义 设置 ， 
如 图 9-18 所 示 。 


图 9-18 选择 “ 方 框 ” 选 项 


在 CSS 的 “ 方 框 ”中 各 选项 参数 如 下 。 

Width 和 Height: 设置 元 素 的 宽度 和 高 度 。 

Float; 设置 其 他 元 素 在 哪个 边 围绕 元 素 浮动 。 其 他 元 素 按 通常 的 方式 环绕 在 浮动 元 素 的 周围 。 

Clear: 定义 不 允许 APDiv 的 边 。 如 果 清 除 边 上 出 现 APDiv， 则 带 清除 设置 的 元 素 将 移 到 该 APDiv 的 下 方 。 
Padding: 指定 元 素 内 容 与 元 素 边框 (如 果 没有 边框 ， 则 为 边 距 ) 之 间 的 间距 ， 也 叫 内 边 距 。 取 消 选 择 


“全 部 相同 ”选项 可 设置 元 素 各 个 边 的 填充 ; “全 部 相同 ”选项 将 相同 的 填充 属性 应 用 于 元 素 的 Top、 
Right、Bottom 和 Left 侧 。 

Margin: 指定 一 个 元 素 的 边框 (如 果 没 有 边框 ， 则 为 填充 ) 与 另 一 个 元 素 之 间 的 间距 ， 也 叫 外 边 距 。 
仅 当 应 用 于 块 级 元 素 ( 段 落 、 标 题 和 列表 等 ) 时 ，Dreamweaver 才 在 文档 窗口 中 显示 该 属性 。 取 消 选择 
“全 部 相同 ”选项 可 设置 元 素 各 个 边 的 边 距 ; “全 部 相同 ”选项 将 相同 的 边 距 属性 应 用 于 元 素 的 Top、 

Right、Bottom 和 Left 侧 。 


下 面 是 一 个 设置 单元 格 的 内 边 距 实例 ， 代 码 如 下 所 示 。 


Td 


内 边 距 ， 在 浏览 器 中 的 网 页 效果 如 图 9-19 所 示 。 


EE = [9 
[SO le rvEreemerm Lm | | x | | 


TT 
| 


这 个 表格 单 开 的 竺 个 边 搬 有 相 忆 的 内 边 琵 - 


这 个 宁 格 单元 的 上 和 下 内 演 距 是 0. 5cm， 左 和 右 内 这 中 是 ce- 


图 9-19 内 边 距 


上 9.5.5 设置 边框 样式 一 一 

在 HTML 中 ， 使 用 表格 来 创建 文本 周围 ; 
的 边框 ， 但 是 通过 使 用 CSS 边 框 属性 ， 可 以 创 | 
建 出 效果 出 色 的 边框 ， 并 且 可 以 应 用 于 任何 | 
元 素 。CSS 的 “边框 ”类 别 可 以 定义 元 素 周围 ; 


边框 的 设置 ， 如 图 9-20 所 示 。 


本 sas 一 dth cas 一 
广 答 回 全 部 本 @) 回 全 部 相同 他 回 生 部 相同 O) 
于 Term : > 国 丙 本 加 | 
让 isnt 司 | 二 || | 
Botton @®) 司 外 ll 
Lf: 司 |[ 司 项 划 梧 | 加 
| ET CI Ry |] 
图 9-20 选择 “边框 ”选项 


在 CSS 的 “边框 ”中 各 选项 参数 如 下 。 

[ ”Style: 设置 边框 的 样式 外 观 。 样 式 的 显示 方 
式 取决 于 浏览 器 。Dreamweaver 在 文档 窗口 
中 将 所 有 样式 呈现 为 实 线 。 取 消 选 择 “ 全 部 
相同 ”选项 可 设置 元 素 各 个 边 的 边框 样式 ; 

“全 部 相同 ”选项 将 相同 的 边框 样式 属性 应 
用 于 元 素 的 top、 Tight、bottom 和 1left 侧 。 
Width， 设置 元 素 边框 的 粗细 。 取 消 选择 “全 
部 相同 ”选项 可 设置 元 素 各 个 边 的 边框 宽 

; “全 部 相同 ”选项 将 相同 的 边框 宽度 应 
用 于 元 素 的 top、right、bottom 和 left 侧 。 
Color: 设置 边框 的 颜色 。 可 以 分 别 设置 每 个 边 
的 颜色 。 取 消 选择 “全 部 相同 ”选项 可 设置 元 
素 各 个 边 的 边框 颜色 ; “全 部 相同 ”选项 将 机 
同 的 边框 颜色 应 用 于 元 素 的 top、right、bottom 和 
left 侧 。 


下 面 是 一 个 设置 4 个 边框 的 颜色 实例 ， 代 


i 
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这 上 段 代码 使 用 border-style 设 置 边框 样式 ， a 
使 用 border-width 设 置 边框 粗细 ， 使 用 border- Em ARROW TR wow - 
color 设 置 边框 颜色 。"border-width" 属性 如 。 [screamer 
果 单 独 使 用 的 话 是 不 会 起 作用 的 。 首 先 使 用 “|EEEa 
"border-style" 属性 来 设置 边框 。 在 浏览 器 中 ETE 
的 网 页 效果 如 图 9-21 所 示 。 


图 9-21 设置 边框 样式 


全 9.5.6 设置 列表 样式 
CSS 的 “列表 ”类 别 为 列表 标签 定义 列表 设置 ， 如 图 9-22 所 示 。 


[boay 的 Ey 


I 在 CSS 的 “列表 ”中 名 选项 参数 如 下 。 
lteterioe: CE 六 List-style-type: 设置 项 目 符号 或 编号 的 
List-style-Position(E): ~ 外 观 。 
娘 Lististyle-image: 可 以 为 项 目 符号 指定 自 定义 
图 像 。 单 击 “浏览 ”按钮 选择 图 像 ， 或 输入 
图 像 的 路 径 。 
六 Liststyle-position。 设置 列表 项 文本 是 否 换行 
Ce CE Ce eas 和 缩 进 〔 外 部 ) ， 以 及 文本 是 否 换 行 到 左边 
图 9-22 选择 “列表 ”选项 亚 (内 部 ) 。 
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下 面 是 一 个 在 有 序列 表 中 不 同类 型 的 列 
表 项 标记 实例 ， 代 码 如 下 所 示 。 | 


| 这 上段 代码 使 用 list-style-type 设 置 不 同类 
; 型 的 列表 项 标记 ， 在 浏览 器 中 的 网 页 效果 如 
| 图 9-23 所 示 。 


图 9-23 ”设置 不 同类 型 的 列表 项 
国 9.5.7 设置 定位 样式 

定位 属性 控制 网 页 所 显示 的 整个 元 素 的 位 置 。 例 如 ， 如 果 一 个 <Div> 元 素 既 包含 文本 又 包 
含 图 片 ， 则 可 用 CSS 文 本 属性 控制 <Div> 元 素 中 字母 和 段落 间隔 ， 同 时 ， 可 用 CSS 定 位 属性 控 
制 整个 <Div> 元 素 的 位 置 ， 包 括 图 片 。 可 将 元 素 放 置 在 网 页 中 的 绝对 位 置 处 ， 也 可 相对 于 其 他 
元 素 放置 。 还 可 控制 元 素 的 高 度 和 宽度 ， 并 设置 它 的 Z 索 引 ， 使 其 显示 在 其 他 元 素 的 前 面 或 后 


面 ， 如 图 9-24 所 示 。 


Ca CE | 
图 9-24 选择 “定位 ”选项 
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在 CSS 的 “定位 ”中 各 选项 参数 如 下 。 
友 Position: 在 CSS 布 局 中 ，Position 发 挥 着 非常 重要 的 作用 ， 很 多 容器 的 定位 是 用 Position 来 完成 。 
Position 属 性 有 4 个 可 选 值 ， 它 们 分 别 是 static、absolute、fixed 和 relative。 
absolute: 能 够 很 准确 地 将 元 素 移动 到 你 想 要 的 位 置 ， 绝 对 定位 元 素 的 位 置 。 
fixed: 相对 于 窗口 的 固定 定位 。 
Telative: 相对 定位 是 相对 于 元 素 默 认 的 位 置 的 定位 。 
static: 该 属性 值 是 所 有 元 素 定位 的 默认 情况 ， 在 一 般 情 况 下 ， 我 们 不 需要 特别 地 去 声明 它 ， 但 有 时 候 遇 到 继 
承 的 情况 ， 我 们 不 愿意 见 到 元 素 所 继承 的 属性 影响 本 身 ， 因 而 可 以 用 position'static 取 消 继承 ， 即 还 原 元 素 定 位 
的 默认 值 。 
让 Visibility: 如 果 不 指 定 可 见 性 属性 ， 则 默认 情况 下 大 多 数 浏览 器 都 继 承 父 级 的 值 。 
交 Placement: 指定 AP Div 的 位 置 和 大 小 。 
六 Clip: 定义 APDiv 的 可 见 部 分 。 如 果 指 定 了 剪辑 区 域 ， 可 以 通过 脚本 语言 访问 它 ， 并 操作 属性 以 创建 像 擦 
除 这 样 的 特殊 效果 。 通 过 使 用 “改变 属性 ”行为 可 以 设置 这 些 擦 除 效 果 。 


下 面 是 一 个 使 用 绝对 值 来 对 元 素 进行 定位 的 实例 ， 代 码 如 下 所 示 。 


这 段 代 码 使 用 position:absolute 设 置 了 ea 
元 素 的 绝对 定位 ， 在 浏览 器 中 的 网 页 效果 如 [as 


图 9-25 所 示 。 We ER THR te, 高 页 而 而 部 


这 是 带 有 绝对 定位 的 标题 


图 9-25 设置 绝对 定位 


虽 9.5.8 ”设置 扩展 样式 


“扩展 ”样式 属性 包含 分 页 和 视觉 效果 
两 部 分 ， 如 图 9-26 所 示 。 


i 


在 CSS 的 “扩展 ”中 各 选项 参数 如 下 。 I 
I 六 Page-break-before: 这 个 属性 的 作用 是 为 打印 上 
上 的 页 面 设置 分 页 符 。 I 
上 ”Page-break-after: 检索 或 设置 对 象 后 出 现 的 页 上 
上 分 齐 符 。 1 
上 WA Cursor: 指针 位 于 样式 所 控制 的 对 象 上 时 改 
上 变 指针 图 像 。 1 
有 对 衬 坟 所 控制 的 对 对 应 用 特 丈 六 


人 肯 9.5.9 ”过渡 样式 的 定义 

在 过 去 的 几 年 中 ， 大 多 数 用 户 都 是 使 用 
JavaScript 来 实现 过 渡 效 果 。 使 用 CSS 可 以 实 
现 同样 的 过 渡 效 果 。“ 过 渡 ” 样 式 属性 如 图 
9-27 所 示 。 过 渡 效 果 最 明显 的 表现 就 是 当 用 户 
把 鼠标 悬 停 在 某 个 元 素 上 时 高 亮 它们 ， 如 链 
接 、 表 格 、 表 单 域 、 按 钮 等 。 过 渡 可 以 给 页 
面 增加 一 种 非常 平滑 的 外 观 。 


7.0 


来 讲述 网 页 中 添加 CSS 样 式 


实战 应 用 


DW sn ean Sav EMD em eo asi0 WaS OW met 


Fage-brear yerore 国 ) 


Page-breal-after 四 


corsor © 
Filter 四 


图 9-26 选择 “扩展 ”选项 


body 的 “CSS 规则 定义 


EE 
Ei 


回 所 有 可 动画 时 性 4) 
日 
折 续 时 间 邮 ): | 
We: | 
计时 功能 0D): | 


TREETR 下 
| 嘴 


图 9-27 


“过 小 ”样式 属性 


一 一 对 网 页 添加 CSS 样 式 


通过 以 上 对 CSS 的 一 些 基本 知识 的 了 解 和 认识 ， 下 面 将 通过 具体 事例 


CE | 
pom 


的 应 用 ， 具 体 步 骤 如 下 。 
团 打开 网 页 文档 ， 如 图 9-28 
所 示 。 


ET [3 


国 cass 


“| 加 watcsawee 
区 
二 me 


EF 
| 


图 9-28 打开 网 页 文档 
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固 选择 “窗口 ” |“CSS 设 计 TT 名- IE 
器 ”命令 ， 打 开 “CSS 设 SD i DNS i ep 


> 


计 器 ”面板 ， 在 面板 中 单 
击 添加 “CSS 源 ”按钮 ， 


在 弹出 的 菜单 中 选择 “ 附 ee TT 
加 现 有 的 CSS 文 件 ” 选 | 
项 ， 如 图 9-29 所 示 。 Ne | 


OD 


图 9-29 选择 “附加 现 有 的 CSS 文 件 ” 选 项 
弹出 “使 用 现 有 的 CSS 文 件 ” 对 话 框 ， 在 对 话 框 中 单 击 “ 文 件 /URL” 文 本 框 右边 的 “浏览 ” 按 
钮 ， 如 图 9-30 所 示 。 
园 弹出 “选择 样式 表 文件 ”对 话 框 ， 在 对 话 框 中 将 选择 应 用 的 样式 ， 如 图 9-31 所 示 。 


Coa EREODEIOEOOOZCT 3 
se@l 
了 Far3er "9623T2" 
a 2007 时 人生 简体 中 
六 版 mW 


图 9-30 “使 用 现 有 的 CSS 文 件 ” 对 话 框 
园 单 击 “ 确 定 ”按钮 ， 添 加 到 文本 框 中 ， 如 图 9-32 所 示 。 
国 单 击 “ 确 定 ”按钮 ， 链 接 CSS 样 式 ， 如 图 9-33 所 示 。 


[ET 


图 9-32 “使 用 现 有 的 CSS 文 件 ” 对 话 框 图 9-33 链接 CSS 样 式 
链接 的 CSS 代 码 如 图 9-34 所 示 。 其 代码 如 下 。 
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国 保存 文档 ， 按 <F12> 键 在 浏览 器 中 预览 效果 ， 如 图 9-35 所 示 。 


图 9-34 CSS 样 式 图 9-35 对 网 页 添加 CSS 样 式 效果 


| 课堂 实录 


9.7 一 一 一 一 


条 加 CSS 有 4 种 方法 : 、 ， 
(2) 在 CSS 中 ， 有 各 种 不 同类 型 的 选择 器 ， 基 本 选择 器 有 


~ 


沁 。 


(3) 和 等 最 常用 的 文本 编辑 工具 对 CSS 的 初学 者 都 很 有 帮助 。 
本 课 小 结 
@ 本 课 主 要 讲述 了 CSS 的 基础 知识 ， 包 括 CSS 的 基本 概念 ， 使 用 CSS、 


CSS 基 本 语法 ， 使 用 Dreamweaver 编 辑 CSS 等 。 通 过 对 本 课 的 学 习 ， 使 大 家 懂 和 时 Css 是 什么 ， 并 
能 灵活 运用 CSS 技 术 ， 制 作出 具有 更 多 新 特性 的 Web 页 。 


本 课 导 读 

浏览 网 页 时 ， 获 取信 息 最 直接 、 最 直观 的 方式 就 是 通过 文本 。 
文本 是 基本 的 信息 载体 ， 不 管 网 页 内 容 如 何 丰富 ， 文 本 自始至终 都 是 
网 页 中 最 基本 的 元 素 ， 因 此 掌握 好 文本 和 段落 的 使 用 ， 对 于 网 页 制作 
来 说 是 最 基本 的 。 在 网 页 中 添加 文字 并 不 困难 ， 主 要 问题 是 如 何 编排 
这 些 文字 ， 以 及 控制 这 些 文字 的 显示 方式 ， 让 文字 看 上 去 编排 有 序 、 
整齐 美观 。 本 课 主 要 讲述 使 用 CSS 设 计 丰 富 的 文字 特效 ， 以 及 使 用 
CSS 排 版 文本 。 


技术 要 点 
太 ”通过 CSS 控 制 文本 样式 
太 ”通过 CSS 控 制 段落 格式 
太 滤 镜 
太 CSS 字体 样式 综合 演练 


Dan 


CSS 字 体 样式 


第 10 课 
CSS 控 制 网 页 文本 和 上 段落 样式 
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10 | 通过 CSS 控 制 文本 样式 


使 用 CSS 样 式 表 可 以 定义 丰富 多 彩 的 文字 格式 。 文 字 的 属性 
主要 有 字体 、 字 号 、 加 粗 与 斜体 等 。 应 用 多 种 样式 的 文字 ， 颜 色 、 大 小 已 经 有 了 变化 ， 但 同时 
也 保持 了 页 面 的 整洁 与 美观 ， 给 人 以 美的 享受 。 


上 10.1.1 课堂 小 实例 一 -字体 font-family 
font-family 属 性 用 来 定义 相关 元 素 使 用 的 字体 。 
基本 语法 : 


语法 说 明 : 

font-family 属 性 中 指定 的 字体 要 受到 用 户 环境 的 影响 。 打 开 网 页 时 ， 浏 览 器 会 先 从 用 户 计 
算 机 中 寻找 font-family 中 的 第 一 个 字体 ， 如 果 计 算 机 中 没有 这 个 字体 ， 会 向 右 继续 寻找 第 二 个 
字体 ， 以 此 类 推 。 如 果 浏 览 页 面 的 用 户 在 浏览 环境 中 没有 设置 相关 的 字体 ， 则 定义 的 字体 将 失 
去 作用 。 

在 Dreamweaver 的 CSS 样 式 规则 定义 中 将 “HTML 十 CSS 网 页 制作 与 布局 课堂 实录 ”字体 设 
置 为 微软 雅 黑 ， 如 图 10-1 所 示 。 


在 浏览 器 中 浏览 网 页 效果 ， 如 图 10-2 所 示 。 


记 运 古 面 
3 (|B ownnw nesemwmnouoiiinden BP- ox| 0 2 


交 伯 (站 尖 闹 掉 ， 豆 看 (V) 改天 关内 工具 融和 H) 


Font-fonily TF)， 回 秽 软 雅 时 


Font-size(S): 区 Fontweight OD): 


4 
团 


HTML + CSS 网 页 制作 与 布局 课堂 实录 


“| 


Font-style TD) ~ Font-variant ): 


4 


Line-height IT): 了 [Teet-transforn ®); 
Color (C) : [9EEEEEE 


图 10-1 设置 字体 图 10-2 浏览 网 页 效果 
但 是 在 实际 应 用 中 ， 由 于 大 部 分 中 文 操作 系统 的 计算 机 中 并 没有 安装 很 多 字体 ， 因 此 建议 
在 设置 中 文字 体 属性 时 ， 不 要 选择 特殊 字体 ， 应 选择 宋体 或 黑体 。 否 则 当 浏 览 者 的 计算 机 中 没 
有 安装 该 字体 时 ， 会 显示 不 正常 ， 如 果 需 要 安装 装饰 性 的 字体 ， 可 以 使 用 图 片 来 代替 纯 文本 的 


显示 ， 如 图 10-3 和 图 10-4 所 示 。 
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图 10-3 用 图 片 来 代替 纯 文 本 的 显示 


图 10-4 用 图 片 来 代替 文本 的 显示 


肯 10.1.2 课堂 小 实例 一 一 字号 font-size 一 


字体 的 大 小 属性 font-size 用 来 定义 字体 的 
大 小 。 
基本 语法 : 


语法 说 明 : 

font-size 属 性 的 取 值 既 可 以 使 用 长 度 值 ， 
也 可 以 使 用 百分比 值 。 其 中 百分比 值 是 相对 ; 
于 父 元 素 的 字体 大 小 来 计算 的 。 | 
在 CSS 中 ， 有 两 种 单位 。 一 种 是 绝对 长 | 
度 单位 ， 包 括 英寸 (in) 、 厘 米 (cm) 、 ; 
毫米 (mm) 、 点 (pt) 和 派 卡 (pce) 。 另 | 
一 种 是 相对 长 度 单位 ， 包 括 em、ex 和 像素 | 
(pixel) 。 由 于 ex 在 实际 应 用 中 需要 获取 x ; 
大 小 ， 因 浏览 器 对 此 处 理 方式 非常 粗糙 而 被 ; 
抛弃 ， 所 以 现在 的 网 页 设计 中 对 大 小 距离 的 | 
控制 使 用 的 单位 是 em 和 px (当然 还 有 百分数 | 
值 ， 但 它 必须 是 相对 于 另外 一 个 值 的 ) 。 | 

Points 是 确定 文字 尺寸 非常 好 的 单位 ， 因 | 
为 它 在 所 有 的 浏览 器 和 操作 平台 上 都 适用 。 
从 网 页 设计 的 角度 来 说 ，pixel (像素 ) 是 一 | 
个 非常 熟悉 的 单位 ， 它 最 大 的 优点 就 在 于 所 ， 
有 的 操作 平台 都 支持 pixel 单 位 (而 对 于 其 他 | 
的 单位 来 说 ，PC 机 的 文字 总 是 显得 比 MAC 机 ; 
中 大 一 些 。 而 其 不 利之 处 在 于 ， 当 用 户 使 用 | 
pixels 单 位 时 ， 网 页 的 屏幕 显示 不 稳定 ， 字 体 | 


时 大 时 小 ， 甚 至 有 时 根本 不 显示 ， 而 points 单 


| 位 则 没有 这 种 问题 。 


字体 的 大 小 属性 font-size， 也 可 以 在 


| Dreamweaver 中 进行 可 视 化 操作 。 在 “Font- 
| size” 后 面 的 第 1 个 下 拉 列 表 中 选择 表示 字体 
”大 小 的 值 ， 第 2 个 下 拉 列 表 中 选择 单位 ， 如 图 
; 10-5 和 10-6 所 示 。 


人 类 用 == 
| ont-fmilyW)， 避 入 革 雪 
| matress): 国 ww > 4 
| roat-stylemD: 30 
| Linrbeigt a): 过 x 7 Tet 
1 
| Textrdecoratitn D16 ine WW) 
se) 
-my laroveh th) 
| ) 
| 
| ET 取消 | [ 应 用 愉 ) 


图 10-5 设置 字体 大 小 


10-6 选择 单位 
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此 时 CSS 代 码 如 下 所 示 ， 使 用 “font-size: | 但 可 读 性 较 差 。 在 网 页 应 用 中 经 常 使 用 不 同 的 
36pt” 设 置 字号 为 36pt， 在 浏览 器 中 浏览 文字 ; 字号 来 排版 网 页 ， 如 图 10-8 所 示 。 
效果 如 图 10-7 所 示 。 通 过 像素 设置 文本 大 小 ， ; 上 万 rr 
可 以 对 文本 大 小 进行 完全 控制 。 


图 10-7 设置 字号 后 的 效果 : 

一 般 网 页 常用 的 字号 大 小 为 12 磅 左右 。 较 ; 
大 的 字体 可 用 于 标题 或 其 他 需要 强调 的 地 方 ， ;二 S84 
小 一 些 的 字体 可 以 用 于 页 脚 和 辅助 信息 。 需 要 ni ee 
注意 的 是 ， 小 字号 容易 产生 整体 感 和 精致 感 ， | 图 10-8 使 用 不 同 的 字号 来 排版 网 页 


国 10.1.3 ”课堂 小 实例 一 一 加 粗 字体 font-weight 一 一 一 一 一 一 一 0 
i i 值 ， 如 图 10-9 所 示 。 


的 粗细 。 

基本 语法 : 

语法 说 明 : | 

font-weight 的 取 值 范围 包括 normal、 ; ee 
bold、bolder、lighter、number。 其 中 normal 表 | ee 
示 正 常 粗细 bold 表示 粗 体 ，bolder 表 示 特 粗 | 


体 ; lighter 表 示 特 细 体 ，number 不 是 真正 的 取 : 
值 ， 其 范围 是 100~900， 一 般 情况 下 都 是 整 | 
百 的 数字 ， 如 200、300 等 。 : 


图 10-9 设置 字体 粗细 


字体 的 加 粗 属性 font- weight 也 可 以 | ” 网 页 中 的 标题 ， 比 较 醒目 的 文字 或 需 
在 Dreamweaver 中 进行 可 视 化 操作 。 在 | 0 突出 的 内 容 一 般 都 会 用 粗 体 字 ， 如 图 
| 10- 未。 


“Font-weight” 下 拉 列 表 中 可 以 选择 具体 | 
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图 10-10 ”标题 或 醒目 的 文字 使 用 粗 体 字 


旧 10.1.4 课堂 小 实例 一 字体 


风格 font-style 
font-style 属 性 用 来 设置 字体 是 否 为 斜体 。 
基本 语法 : 
font-style: 样 式 的 取 值 
语法 说 明 : 


样式 的 取 值 有 3 种 。normal 是 默认 正常 的 
”于 注释 、 说 明 、 日 期 或 其 他 信息 ， 如 图 10-13 
| 所 示 ， 网 页 右 侧 的 文字 使 用 了 斜体 字 。 


字体 ;， italic 以 斜体 显示 文字 ; oblique 属 于 中 
间 状 态 ， 以 偏 斜体 显示 。 


font-style 属 性 也 可 以 在 Dreamweaver 中 进 | 
行 可 视 化 操作 。 在 style 下 拉 列 表 中 可 以 选择 | 


具体 值 ， 如 图 10-11 所 示 。 


二 的 CSS 基 MI 二 义 
4 gy 


[WW | 村 取消 | [用 内 


图 10-11 设置 字体 样式 为 斜体 


第 10 课 EeES 2 上 BS 
其 CSS 代 码 如 下 ， 使 用 “font-style: 


italic” 设置 字体 为 斜体 ， 在 浏览 器 中 浏览 效 
| 果 ， 如 图 10-12 所 示 。 


<style type="text/css"> 

:EE 

font-family: "微软 雅 黑 "; 
font-size: 24pt; 
font-style: italic; 
font-weight: bold; 


</style> 


HTML + CS5S 历 珊 先 作 与 访 户 况 党 实 肌 


图 10-12 设置 为 斜体 效果 
斜体 文字 在 网 页 中 应 用 也 比较 多 ， 多 用 


a Turrion 


鸭 We grow ideas 


图 10-13 使 用 斜体 字 的 网 页 
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国 10.1.5 课堂 小 实例 一 一 小 写字 母 转 为 大 写字 母 font-variant 


使 用 font-variant 属 性 可 以 将 小 写 的 英文 字 | 局 
母 转变 为 大 写 ， 而 且 在 大 写 的 同时 ， 能 够 让 | 


字母 大 小 保持 与 小 写 时 一 样 的 尺寸 高 度 。 
基本 语法 : 
font-variant: 变 体 属性 值 
语法 说 明 : 
font-variant 属 性 值 如 表 10-1 所 示 。 
表 10-1 font-variant 属 性 


属性 值 描 述 
normal 正常 值 
al 将 小 写 英文 字体 转换 为 大 写 英 
文字 体 


font-variant 属 性 也 可 以 在 Dreamweaver 中 


进行 可 视 化 操作 。 在 “ 变 体 ”下 拉 列 表 中 可 | 
以 选择 具体 值 ， 如 图 10-14 所 示 。 


二 的 CSS 需 则 十 义 上 le 


[RW | 


图 10-14 设置 font-variant 属 性 : 

其 CSS 代 码 如 下 所 示 ， 使 用 “font-variant: : 
small-caps” 设 置 英文 字母 全 部 大 写 ， 而 且 在 
大 写 的 同时 ， 能 够 让 字母 大 小 保持 与 小 写 时 ; 
一 样 的 尺寸 高 度 。 在 浏览 器 中 浏览 效果 , 如 | 
图 10-15 所 示 。 | 


<style type="text/css"> 

ze 
font-family: "微软 雅 黑 "; 
font-size: 24pt; 
font-style: italic; 
font-weight: bold; 
font-variant: small-caps; 

} 

</style> 
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图 10-15 将 小 写 英文 字体 转换 为 大 写 英 文字 体 
大 写 英 文字 母 在 英文 网 站 中 的 应 用 很 


” 广 ， 如 导航 栏 、LOGO、 标 题 等 ， 如 图 10-16 
| 和 图 10-17 所 示 。 


图 10-16 LOGO 为 大 写 的 英文 字母 


图 10-17 导航 栏 为 大 写 的 英文 字母 
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vz ry ee > 
] @ II] 通过 CSS 控 制 段 落 格式 “一 一 一 。 
@ 文本 的 段落 样式 定义 整 段 的 文本 特性 。 在 CSS 中 ， 主 要 包括 

单词 间距 、 字 母 间 距 、 垂 直 对 齐 、 文 本 对 齐 、 文 字 缩 进 和 行 高 等 。 
轩 10.2.1 课堂 小 实例 一 一 单词 间隔 word-spacing 


wordspacing 可 以 设置 英文 单词 之 间 的 距离 。 单词 间隔 在 实际 网 页 中 也 比较 常见 ， 如 
基本 语法 : i 图 10-20 所 示 ， 网 页 下 半 部 分 的 各 个 区 块 中 

| 就 使 用 了 “word-spacing: 10px;” 来 设置 单 
语法 说 明 : 词 间隔 。 


可 以 使 用 normal， 也 可 以 使 用 长 度 值 。 
normal 指 正常 的 间隔 ， 是 默认 选项 ;长 度 是 设 
置 单词 间隔 的 数值 及 单位 ， 可 以 使 用 负 值 。 

在 图 10-18 所 示 的 “区 块 ” 分 类 中 的 
“word-spacing” 下 拉 列 表 中 可 以 设置 间距 的 
值 ， 设 置 间距 后 的 效果 如 图 10-19 所 示 。 


Letter-spacing lh) 


Vertieu-i 


Tait) 


se 一 一 : 图 10-20 设置 单词 间隔 
有 10.2.2 ”课堂 小 实例 一 一 字符 
Ee Ca re | | 间隔 letter-spacing -2 
图 10-18 设置 “单词 间距 ” | 使 用 字符 间隔 可 以 控制 字符 之 间 的 间隔 


| 距离 。 
| 基本 语法 : 


语法 说 明 : 

| 可 以 使 用 normal， 也 可 以 使 用 长 度 值 。 
i normal 指 正常 的 间隔 ， 是 默认 选项 ， 长 度 是 设 

[| | 置 字 符 间隔 的 数值 及 单位 ， 可 以 使 用 负 值 。 

上 ES 一 
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Win Bs Ces IR wat 在 图 10-21 所 示 的 “区 块 ” 分 类 中 的 “letter- 
HTML CSS JavaScript | spacing” 下 拉 列 表 中 ， 可 以 设置 字符 间隔 的 
; 值 ， 设 置 字符 间隔 的 效果 如 图 10-22 所 示 。 
| 其 CSS 代 码 如 下 所 示 。 


图 10-19 设置 间距 后 


| CD CE CR Lin 


图 10-21 设置 “字符 间隔 ?” 


图 10-22 字符 间隔 效果 


肯 10.2.3 ”课堂 小 实例 一 一 文字 修饰 text-decoration 


使 用 文字 修饰 text-decoration 属 性 可 以 对 | 
文本 进行 修饰 ， 如 设置 下 划 线 、 删 除 线 等 。 
基本 语法 : 
text-decoration: 取 值 
语法 说 明 : 
text-decoration 属 性 值 如 表 10-2 所 示 。 
表 10-2 text-decoration 属 性 


属性 值 描 ” 述 
none 默认 值 
underline 对 文字 添加 下 划 线 
overline 对 文字 添加 上 划 线 
line-through 对 文字 添加 删除 线 
blink 闪烁 文字 效果 


text-decoration 属 性 也 可 以 在 
Dreamweaver 中 进行 可 视 化 操作 。 在 “Text- | 
decoration” 选 区 中 可 以 选择 具体 选项 ， 如 图 ; 
10-23 所 示 。 


:的 CSS 宙 则 证 太 -= 
供 。 。。 直 
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图 10-23 设置 修饰 属性 : 
其 CSS 代 码 如 下 所 示 ， 使 用 “text- | 
decoration: underline ”设置 文字 带 有 下 划 线 。 
在 浏览 器 中 浏览 效果 ， 如 图 10-24 所 示 。 


<style type="text/css"> 


2 
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font-family: "微软 雅 黑 "; 
font-size: 36pt; 
font-style: italic; 
font-weight: bold; 
text-decoration: underline; 
} 
</style> 


EE 


HTML CSS JavaScript 


图 10-24 设置 下 划 线 


带 有 下 划 线 的 文字 在 网 页 中 应 用 得 也 比 


| 较 多 ， 如 图 10-25 所 示 ， 右 侧 下 半 部 分 交 
， 导航 文字 带 有 下 划 线 。 


Cn PRoTECTION SOFTWARE 


op CN 


SUFTWARE 


bm 


图 10-25 带 有 下 划 线 的 文字 导航 


@ 一 ee 第 10 课 于 到 


页 文本 和 段落 


样式 


中 10.2.4 课堂 小 实例 一 一 垂直 对 齐 方式 vertial-align 一 一 一 一 0 


对 齐 方 式 。 
基本 语法 : 


语法 说 明 : 
vertical-align 包 括 以 下 取 值 。 

baseline: 浏览 器 默认 的 垂直 对 齐 方式 。 
sub: 文字 的 下 标 。 

super: 文字 的 上 标 。 

top: 垂直 靠 上 对 齐 。 


对 对 对 对 对 


对 齐 。 


对 对 


下 对 齐 。 


在 图 10-26 所 示 的 “区 块 ”分 类 中 的 | 
“vertialalign” 下 拉 列 表 中 ， 可 以 设 垂直 对 齐 方 | 


式 ， 在 浏览 器 中 浏览 效果 ， 如 图 10-27 所 示 。 


其 CSS 代 码 如 下 所 示 。 


使 用 垂直 对 齐 方式 可 以 设置 文字 的 垂直 | 


text-top， 使 元 素 和 上 级 元 素 的 字体 癌 上 ， 


textbottom， 使 元 素 和 上 级 元 素 的 字体 向 | De 


; Er 
! 四 


Mord-spacing G) 
Letter-spacing0): 


[mm 世 了 | 请 内 


”图 10-26 ”设置 “要 直 对 齐 方式 ” 


Te 


人 DAHIML+CSSRPF.， 


图 10-27 纵向 排列 效果 


轩 10.2.5 “课堂 小 实例 一 一 文本 转换 text-transform 一 一 一- 一- 一 一 


text-transform 用 来 转换 英文 字母 的 大 小 写 。 
基本 语法 1 


语法 说 明 : 
text-transform 包 括 以 下 取 值 范围 。 
none: 表示 使 用 原始 值 。 


对 对 


lowercase: 
母 大写 。 
uppercase: 
术 写 。 
capitalize: 表示 使 每 个 字 的 所 有 字母 小 写 。 


+ 


对 


在 “text-transform” 下 拉 列 表 中 可 以 选择 | 


“uppercase” 选 项 ， 如 图 10-28 所 示 。 


表示 使 每 个 单词 的 第 一 个 字 ， 


表示 使 每 个 单词 的 所 有 字母 | 


EE Ts 上 一 站 
Tatraeeeraamoi maminm care :El 
Ee Ee 
ough (L) 


Eus gj 
加 aone0n 


图 10-28 设置 大 小 写 转换 
对 网 页 应 用 “大 写 ” 后 ， 可 以 看 到 网 页 


中 上 半 部 分 的 段落 英文 字母 都 为 大 写 了 ， 如 
i 图 10-29 所 示 。 
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| 同 课堂 实录 


MY Em eS Ur ee 


图 10-29 转换 为 “大 写 ” 字 母 


用 10.2.6 课堂 小 实例 一 -水平 EE 
对 齐 方 式 text-align 人 ， 


text-align 用 于 设置 文本 的 水 平 对 齐 方式 。 
基本 语法 : 


语法 说 明 : 
水 平 对 齐 方 式 取 值 范围 包括 left、right、 
center 和 justify4 种 对 齐 方 式 。 
Left， 左 对 齐 ; 
Right:， 右 对 齐 ; 
Center: 居中 对 齐 ; 
Justify: 两 端 对 齐 。 


对 对 对 对 


在 图 10-30 所 示 的 “区 块 ”分 类 中 的 | 
“text-align” 下 拉 列 表 中 ， 可 以 设置 文本 对 齐 | 
方式 ， 这 里 设置 为 “Left”， 设 置 完成 后 的 效 | 


果 如 图 10-31 所 示 。 
其 CSS 代 码 如 下 所 示 。 


在 网 页 中 ， 文 本 的 对 齐 方式 一 般 采 用 | 
左 对 齐 ， 标 题 或 导航 有 时 也 用 居中 对 齐 的 方 | 
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| 式 ， 如 图 10-32 所 示 ， 
| 


~e® 


网 页 右 侧 的 导航 采用 左 


ED ER CE 


图 10-30 设置 文本 对 齐 


Dreamweaver CC 


图 10-32 右 侧 的 导航 采用 左 对 齐 
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用 10.2.7 ”课堂 小 实例 一 一 文本 
缩 进 text-indent -一 2 

在 HTML 中 只 能 控制 段落 的 整体 向 右 缩 | 
进 ， 如 果 不 进行 设置 ， 浏 览 器 则 默认 为 不 缩 ; 
进 ， 而 在 CSS 中 可 以 控制 段落 的 首 行 缩 进 及 缩 ， 
进 的 距离 。 ;文本 缩 进 在 网 页 中 比较 常见 ， 一 般 用 在 


基本 语法 : | 网 页 中 段落 的 开头 ， 图 10-35 所 示 的 段落 使 用 
| “text-indent: 30px:” 设 置 了 文本 缩 进 。 

语法 说 明 ; | 喝 一 eT— 

文本 的 缩 进 信 可 以 是 长 度 信 或 百分比 。 ME 人 2 


在 图 10-33 所 示 的 “区 块 ” 分 类 中 的 ET 
“text-indent” 下 拉 列 表 中 ， 可 以 设置 缩 进 的 | 


Yertied-i 
Tx) 


| 
图 10-35 设置 了 文本 缩 进 


| 肯 10.2.8 “课堂 小 实例 一 文本 


一 一 一 


图 10-33 设置 缩 进 值 | 行 高 line-height -一 2 


祝 到 | orwrcssmRass5SREXBvVgChlouozTndocnnl 二 P- cx 区 
||E orMtrcsspusares… » 


| 本 
| 


: line-height 属 性 可 以 设置 对 象 的 行 高 ， 行 
EE esww im | | 高 值 可 以 为 长 度 、 倍 数 和 百分比 。 
Dreamweaver CC : 基本 语法 : 


Flash CC EE 


Fireworks CC 语法 说 明 : 

| Line-height 可 以 取 的 值 如 下 所 述 。 

i 六 ”Normal: 上 默认。 设置 合理 的 行 间距 。 

| 太 Number 设置 数字 ， 此 数字 会 与 当前 的 
| ”字体 尺寸 相 乘 来 设置 行 间距 。 

Length: 设置 固定 的 行 间距 。 

%: 基于 当前 字体 尺寸 的 百分比 行 间距 。 
Inherit: 规定 应 该 从 父 元 素 继 承 line- 
height 属 性 的 值 。 

| line-height 属 性 也 可 以 在 Dreamweaver 
| 中 进行 可 视 化 操作 。 在 “line-height” 后 面 


图 10-34 文字 缩 进 后 的 效果 
其 CSS 代 码 如 下 所 示 。 


对 对 对 
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课堂 实录 ~“e ® 


的 第 1 个 下 拉 列 表 中 可 以 输入 具体 数值 ， 在 
第 2 个 下 拉 列 表 中 可 以 选择 单位 ， 如 图 10-3 


-图 
司 ontveght): hid 
J ss 
Tont-style TD) = Font-yarimt 
也 rmi) zo | 7 wTertranstorn 0) 


Text-decoration D): lunderlire ) cor) -| wo0 
Ee 


行距 的 变化 会 对 文本 的 可 读 性 产生 很 
大 的 影响 ， 一 般 情况 下 ， 接 近 字体 尺寸 的 行 
= 距 设 置 比较 适合 正文 。 行 距 的 常规 比例 为 
10:12， 即 用 字 10 点 ， 则 行距 12 点 。 如 “line- 
height:20pt”、“l]ine-height:150%”。 在 网 页 
中 ， 行 高 属性 是 必 不 可 少 的 ， 图 10-39 所 示 的 
网 页 中 的 段落 文本 采用 了 行距 。 


图 10-36 设置 行 高 属性 

其 CSS 代 码 如 下 所 示 ， 使 用 “1line 
height:” 设 置 行 高 为 200%， 设 置 行 高 前 后 
在 浏览 器 中 的 浏览 效果 ， 分 别 如 图 10-37 和 
图 10-38 所 示 。 


[ 划 0 00 
(CE [oveonmmnem aR 


[ERT 


ER 


Dreamweaver CS6 
Flash CS6 
Fireworks CS6 


blog solution partners ‘ 


MembersLo 
Je magna, In hac 全 让 


lictumst. 


Enter Your Name 1 


ee 四 Yt eu, Juctus non, 
图 10-37 设置 行 高 前 ienalsse eu purusel Enter Your Name 


一 TREE id, aliquet vulputate, | 
|[ 生 DAHTML+ CS 网 人 与 同音 关 示 各 兴 \Ct inde him De 和 Forget Password 
RE | oe i us non sodales facilisis, lordet Password EE ,, 


| MO SV i) IRT WO 


图 10-39 段落 采用 了 行距 
上 虽 10.2.9 课堂 小 实例 一 一 处 理 
空白 white-space 一 0 


| white-space 属 性 用 于 设置 页 面 内 空白 的 处 
: 基本 语法 : 


Dreamweaver CS6 
Flash CS6 


Fireworks CS6 


语法 说 明 : 
white-space 可 以 取 的 值 如 下 所 述 。 
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ee。 第 10 课 
normal: 是 默认 属性 ， 即 将 连续 的 多 个 空 : 


格 合并 。 


Pre: 


6 中 才能 正确 显示 。 


nowrap: 


本 ， 直 到 文本 结束 或 者 遇 到 <br> 标 签 。 


进行 换行 。 
pre-line: 
行 符 。 

Inherit: 
space 属 性 的 值 。 


在 图 10-40 所 示 的 “区 块 ”分 类 中 的 | 
“white-space” 下 拉 列 表 中 ， 可 以 设置 属性 为 | 1 


re 


pre，white-space， 用 来 处 理 空白 。 


10.3 


工 ， 也 可 以 使 文字 、 图 像 、 按 钮 鲜艳 无 比 ， 
充满 生机 。 
在 “分 类 ”列表 中 选择 “扩展 ”选项 ， 


样式 ， 如 图 10-42 所 示 。 


会 导致 源 代码 中 的 空格 和 换行 符 被 | 
保留 ， 但 这 一 选项 只 有 在 Internet Explorer | 


强制 在 同一 行内 显示 所 有 文 | 
pre-wrap: 保留 空白 符 序 列 ， 但 是 正常 地 | 
合并 空白 符 序列 ， 但 是 保留 换 | 


规定 应 该 从 父 元 素 继承 white- | 


其 CSS 代 码 如 下 所 示 ， 浏 览 效果 如 图 10-41 | 
所 示 。 | 


在 Filter 右 侧 的 下 拉 列 表 中 选择 要 应 用 的 滤 镜 


CSS 控 制 网 页 文本 和 段落 


样式 


er-spacing S) 


etter-spacingtD) 


EE ER [EN ] 


图 10-40 设置 处 理 空白 
ue ii029Wnden inl EE Cr 加 


| 
| 
1 TD 和 日 五 EM wax) IA ol 


Dreamweaver CS6 Flash CS6 Fireworks CS6 | 


图 10-41 设置 处 理 空白 


滤 镜 是 对 CSS 的 扩展 ， 与 Photeshop 中 的 涉 匀 相似 ， il 
用 很 简单 的 方法 对 页 面 中 的 文字 进行 特效 ; 
处 理 。 使 用 CSS 滤 镜 属 性 可 以 把 可 视 化 的 滤 ; 
镜 和 转换 效果 添加 到 一 个 标准 的 HTML 元 素 } 
上 ， 例 如 图 片 、 文 本 容器 ， 以 及 其 他 一 些 对 | 
象 。 正 是 由 于 这 些 滤 镜 特效 ， 在 制作 网 页 的 ; 
时 候 ， 即 使 不 用 图 像 处 理工 具 对 图 像 进行 加 | 


TagrrbrealrtetoreD) 
arsr-brealrafter () 


caseO 
at 四 


Liby 
lor Color=?, Strexethe?) 
Gy 
Te 


图 10-42 选择 Filter 样 入 
IE4.0 以 上 浏览 器 支持 的 滤 镜 属性 如 


i 表 10-3 所 示 。 


Lx 


和 课堂 实录 “ee 一 全 
表 10-3 ”常见 的 滤 镜 属性 


Alpha 设置 透明 度 

Blur 建立 模糊 效果 

Chroma 把 指定 的 颜色 设置 为 透明 

DropShadow 建立 一 种 偏 移 的 影像 轮 廊 ， 即 投射 阴影 
FlipH 水 平反 转 

FlipV 垂直 反 转 

Glow 为 对 象 的 外 边界 增加 光 效 

Gray 降低 图 片 的 彩色 度 

Invert 将 色彩 、 饱 和 度 及 亮度 值 完全 反 转 建立 底片 效果 
Light 在 一 个 对 象 上 进行 灯光 投影 

Mask 为 一 个 对 象 建立 透明 膜 

Shadow 建立 一 个 对 象 的 国体 轮廓， 即 阴影 效果 
Wave 在 X 轴 和 Y 轴 方向 利用 正弦 波纹 打 乱 图 片 
Xray 只 显示 对 象 的 轮廓 


上 10.3.1 课堂 小 实例 不 透明 度 alpha 
Alpha 滤 镜 可 以 设置 图 像 或 文字 的 不 透明 度 。 
基本 语法 : 
filter:alpha (参数 1= 参 数值 ， 参 数 2= 参 数值 ，…) 
语法 说 明 : 
alpha 滤 镜 的 参数 如 表 10-4 所 示 。 
表 10-4 _ alpha 属性 的 参数 


参 数 描 述 
i; 设置 对 象 的 不 透明 度 ， 取 值 范围 为 0-100， 默 认 值 为 0， 即 完全 透明 ， 
sa 100 为 完全 不 透明 
finishopacity 可 选项 ， 设 置 对 象 透明 渐变 的 结束 透明 度 。 取 值 范围 为 0~100 
用 于 指定 渐进 的 形状 ， 其 中 0 表示 无 渐进 ，]1 为 直线 渐进 ，2 为 圆 形 渐进 ，3 为 矩 
形 渐进 
设置 透明 渐变 开始 点 的 水 平 坐 标 。 其 数值 作为 对 象 宽度 的 百分比 值 处 理 ， 默 认 
值 为 0 
starty 设置 透明 渐变 开始 点 的 垂直 坐标 
finishx 设置 透明 渐变 结束 点 的 水 平 坐标 
finishy 设置 透明 渐变 结束 点 的 垂直 坐标 
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下 面 通过 实例 说 明 Alpha 滤 镜 的 使 用 。 
在 网 页 中 新 建 一 个 样式 “.a”， 在 “扩展 ”分 类 上 的 Filter 下 拉 列 表 中 选择 Alpha 选 项 ， 并 输 
入 参数 值 “Alpha(Opacity=100. pa Style=3)”， 如 图 10-43 所 示 。 


分 页 
Page-break-before (B) - 
Page-break- sfter (I) ~ 


Curser C) ~ 


Filter @) :ITOTISIOEETEOTICSO ~ 


部 助 00 | ERA 


图 10-43 ”Alpha 滤 镜 属 性 
原始 的 图 像 文件 如 图 10-44 所 示 ， 当 样式 创建 成 功 以 后 ， 应 放生 这 下 困 本 CR 
= | | 


Em 


图 10-44 原始 图 像 图 10-45 设置 Style=3 效 果 


但 10.3.2 课堂 小 实例 一 动感 模糊 blur 

假如 用 手 在 一 幅 还 没 干 透 的 油画 上 迅速 划 过 ， 画 面 就 会 变 得 模糊 。CSS 下 的 blur 属 性 就 会 
达到 这 种 模糊 的 效果 。 

基本 语法 : 
filter:blur (add 一 参数 值 ，direction 一 参数 值 ，strength 一 参数 值 

语法 说 明 : 

blur 属 性 中 包括 的 参数 如 表 10-5 所 示 。 

表 10-5 ”blur 属 性 的 参数 


add 布尔 值 ， 设 置 滤 镜 是 否 激活 ， 它 可 以 取 的 值 包括 true 和 false 


direction | 用 来 设置 模糊 方向 ， 按 顺 时 针 的 方向 以 45” 为 单位 进行 累积 
只 能 使 用 整数 来 指定 ， 代 表 有 多 小 像素 的 宽度 将 受到 影响 默认 是 5 个 


strength 
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课 党 实录。 。e-@ 

在 “分 类 ”列表 中 选择 “扩展 ”选项 ， 在 “Filter” 右 侧 的 下 拉 列 表 中 选择 要 应 用 的 滤 镜 样 

式 Blur， 并 输入 参数 值 ， 如 图 10-46 所 示 。 创 建 完 样式 后 并 应 用 该 样式 ， 应 用 Blur 后 的 效果 如 图 
10-47 所 示 。 


Paee-bregrbefore ®) 
Page-bredafter 0) : 


视觉 效果 


Cursor C) - 


lilter @) ， Maatroae, Directionz80, Streneth=25 ~ 


了 


图 10-46 设置 Blur 滤 镜 图 10-47 设置 Blur 滤 镜 后 的 效果 
其 CSS 代 码 如 下 所 示 。 


由 10.3.3 ”课堂 小 实例 一 一 对 颜色 进行 透明 处 理 chroma 一 一 一 一 0 
chroma 滤 镜 用 于 将 对 象 中 指定 的 颜色 显示 为 透明 。 
基本 语法 : 


语法 说 明 : 

参数 color 即 为 要 透明 的 颜色 。 

在 “分 类 ”列表 中 选择 “扩展 ”选项 ， 在 Filter 右 侧 的 下 拉 列 表 中 选择 要 应 用 的 滤 镜 
Chroma， 并 输入 参数 值 ， 如 图 10-48 所 示 。 创 建 完 样式 后 并 应 用 该 样式 ， 应 用 Chroma 后 的 效果 
如 图 10-49 所 示 。 


Page-break -before (B) 
age-brealrafter GT) 
视觉 效果 


CarserC) : - 


Filter (F) : Chroma (Color=#ff0000) = 


CC 于] 己 忆 


图 10-48 设置 Chroma 渡 镜 图 10-49 设置 Chroma 滤 镜 后 的 效果 
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其 CSS 代 码 如 下 所 示 。 


目 10.3.4 课堂 小 实例 一 一 设置 阴影 DropShadow 一 一 一 一 一 一 一 0 


DropShadow 属 性 是 为 了 添加 对 象 的 阴影 效果 。 它 实现 的 效果 看 上 去 就 像 使 原来 的 对 象 离开 
页 面 ， 然 后 在 页 面 上 显示 出 该 对 象 的 投影 。 
基本 语法 : 


语法 说 明 : 
dropShadow 滤 镜 的 参数 如 表 10-6 所 示 。 
表 10-6 ”dropShadow 滤 镜 的 参数 


设置 阴影 的 颜色 
用 于 设置 阴影 相对 图 像 移动 的 水 平 距离 
用 于 设置 阴影 相对 图 像 移动 的 垂直 距离 
大 个 高 外 信 (0 或 1) ， 其 中 0 指 为 透明 像素 生成 阴影 ，1 指 为 不 透明 像素 生成 


positive 


在 “分 类 ”列表 中 选择 “扩展 ”选项 ， 在 Filter 右 侧 的 下 拉 列 表 中 选择 要 应 用 的 滤 镜 
dropShadow， 并 输入 参数 值 ， 如 图 10-50 所 示 。 创 建 完 样式 后 并 应 用 该 样式 ， 应 用 dropShadow 
后 的 效果 如 图 10-51 所 示 。 


图 10-50 设置 dropShadow 滤 镜 图 10-51 设置 dropShadow 滤 镜 后 的 效果 
其 CSS 代 码 如 下 所 示 。 
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YE 课堂 实录 
中 10.3.5 ”课堂 小 实例 


对 象 。 
基本 语法 : 


语法 说 明 : 
在 “分 类 ”列表 中 选择 “扩展 ”选项 ， 


在 Filter 右 侧 的 下 拉 列表 中 选择 要 应 用 的 滤 镜 | 
flipH， 用 于 设置 沿 水 平方 向 翻转 对 象 ， 如 图 ; 
10-52 所 示 。 在 Filter 右 侧 的 下 拉 列表 中 选择 | 
要 应 用 的 滤 镜 flipV， 用 于 设置 沿 垂直 方向 翻 ; 
转 对 象 ， 如 图 10-53 所 示 。 应 用 flipH、flipV | 


后 的 效果 如 图 10-54 所 示 。 


Tagerbreakrbefere 人 ) - 
agerbredrafter I) 
视觉 效 果 
Coursor C) 


Page-breakbetere B) 


Pace-bredeafter OT) : 


视觉 效果 
CarsorC) 


图 10-53 设置 波 镜 fipV 
其 CSS 代 码 如 下 所 示 。 
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对 象 | 

的 翻转 fipH、flipV 必 ， 
flipH 浪 镜 用 于 设置 沿 水 平方 向 翻转 对 | 
象 ，flipV 涉 镜 属性 用 于 设置 沿 垂直 方向 翻转 


“~e® 


图 10-54 对 象 的 翻转 效果 


吐 10.3.6 课堂 小 实例 一 发 光 
| 效果 glow 
: 当 对 一 个 对 象 使 用 Glow 滤 镜 后 ， 这 个 对 
| 象 的 边缘 就 会 产生 类 似 发 光 的 效果 。 


基本 语法 : 

语法 说 明 : 

glow 滤 镜 的 参数 如 表 10-7 所 示 。 
表 10-7 glow 滤 镜 的 参数 


设置 发 光 的 颜色 


设置 发 光 的 强度 ， 取 值 范围 为 
1-255， 默 认 值 为 5 


| 在 “分 类 ”列表 中 选择 “扩展 ”选项 ， 
| 在 Filter 右 侧 的 下 拉 列 表 中 选择 要 应 用 的 滤 镜 
| 样式 Glow， 并 输入 参数 值 ， 如 图 10-55 所 示 。 
; 创建 完 样 式 后 并 应 用 该 样式 ， 应 用 Glow 后 的 
| 效果 如 图 10-56 所 示 。 

其 CSS 代 码 如 下 所 示 。 


下 的 CSS 斋 则 定义 [< 


er 
六 


必 助 00 纺 定 


图 10-55 应 用 Glow 滤 镜 


图 10-56 应 用 Glow 滤 镜 后 


肯 10.3.7 
处 理 gray 
Gray 滤 镜 可 以 把 一 幅 图 片 变 成 灰 度 图 ， 
它 的 语法 如 下 所 示 。 


filter: Gray; 


面板 上 的 Filter 下 拉 列 表 中 选择 Gray 选 项 后 ， 
如 图 10-57 所 示 。 


冶 证 

时 条 
Perchetoee ty 
er teste 3 
过 六 


帮助 加 请 十 


图 10-57 定义 过 滤器 属性 


第 10 课 


课堂 小 实例 一 灰 度 | 


新 建 一 个 样式 “#apDiv1”, 在 “CSS 规 则 | 
定义 ”对 话 框 中 选择 “扩展 ”分 类 。 在 扩展 | 


CSS 控 制 网 页 
其 CSS 代 码 如 下 。 


<style type="text/css"> 


文本 和 段落 样式 


-pl 

filter: Gray; 
} 
</style> 


样式 创建 成 功 后 ， 即 可 应 


样式 ， 应 用 样 


| 式 前 后 的 效果 分 别 如 图 10-58 和 图 10-59 所 示 。 


图 10-58 灰 度 处 理 前 


图 10-59 友 度 处 理 后 
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旧 10.3.8 ”课堂 小 实例 一 一 反 相 | xray， 并 输入 参数 值 ， 如 图 10-61 所 示 。 创 奸 
invert 一 ， 完 样式 后 并 应 用 该 样式 ， 应 用 xray 后 的 效果 如 


| 图 10-62 所 示 。 
Invert 可 以 把 对 象 的 可 视 化 属性 全 部 翻 ; = 


转 ， 包 括 色 彩 、 亮 度 值 和 饱和 度 。 它 的 语法 | 


a | a 
Wap iE_ i 
广 展 面 Filter 下 拉 列 ; : us 加 
医 
Invert 选 项 后 ， 效 果 如 图 10-60 所 示 。 ER 
EI [能 [了 台 | [应 有 WwW ] 


! 图 10-62 设置 xray 滤 镜 后 的 效果 
图 10-60 反 色 处 理 效果 | 其 CSS 代 码 如 下 所 示 。 


片 效果 xray 一 一 一 | 


X 射 线 效果 属性 xray 用 于 加 亮 对 象 的 轮 | 


廓 ， 呈 现 所 谓 的 “X” 光 片 。 目 10.3.10 ”课堂 小 实例 一 一 波 
基本 语法 : | 形 滤 镜 wave 一 一 0 
BS 
语法 说 明 : 效果。 
X 光 效果 滤 镜 不 需要 设置 参数 ， 是 一 种 很 ， “基本 语法 : 


少见 的 滤 镜 ， 它 可 以 像 灰 色 滤 镜 一 样 去 除 对 | 
象 的 所 有 颜色 信息 ， 然 后 将 其 反 转 。 | 
在 “分 类 ”列表 中 选择 “扩展 ”选项 ， 
在 Filter 右 侧 的 下 拉 列 表 中 选择 要 应 用 的 滤 镜 | 语法 说 明 : 
”wave 滤 镜 的 参数 如 表 10-8 所 示 。 
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@ 。 第 10 课 ES 于 台 允 ES 要 要 王 
表 10-8 ”wave 滤 镜 的 参数 


add 是 否 要 把 对 象 按照 波形 样式 打 乱 ， 其 默认 值 是 true 
人 | 设置 滤 镜 建立 的 波浪 数目 

jitetrensth | 设置 波纹 增强 光影 的 效果 ， 取 值 范围 为 0~100 
a | 设置 正弦 波 开 始 处 的 相位 偏 移 


strength 设置 对 象 为 基准 的 在 运动 方向 上 的 向 外 扩散 距离 


在 “分 类 ”列表 中 选择 “扩展 ”选项 ， 在 Filter 右 侧 的 下 拉 列 表 中 选择 要 应 用 的 滤 镜 wave， 并 
输入 参数 值 ， 如 图 10-63 所 示 。 创 建 完 样式 后 并 应 用 该 样式 ， 应 用 wave 后 的 效果 如 图 10-64 所 示 。 


[ET 


SonethE60 Phasec20 Stroneth-20) = 


世 喧 所 3 [ERW | || 


图 10-63 设置 wave 滤 镜 图 10-64 设置 Wave 滤 镜 后 的 效果 
其 CSS 代 码 如 下 所 示 。 
<style type="text/css"> 
pl 
filter: Wave (Add=true, Freq=4, Lightstrength=80, Phase=20, Strength=20); 
} 


</style> 
| OU 实战 应 用 一 一 CSS 字 体 样 式 
. 综合 演练 


前 面 对 CSS 设 置 文字 的 各 种 效果 进行 了 详细 的 介绍 ， 下 面 通过 实例 ， 讲 述 CSS 字 体 样式 的 
综合 使 用 。 
园 打开 网 页 文档 ， 选 中 设置 样式 的 文本 ， 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 选择 “CSS 样 
式 ”|“ 新 建 ”命令 ， 如 图 10-65 所 示 。 
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和 加 课堂 实录 “ee 一 他 
园 弹出 “新 建 CSS 规 则 ”对 话 框 ，“ 选 择 器 类 型 ”选择 “类 ”，“ 选 择 器 名 称 ” 设 置 为 “.h”， 
“规则 定义 ”选择 “ 仅 限 该 文档 ”， 如 图 10-66 所 示 。 


Di 六- 加 
—— pp 
Er [3 
EE | 
先生 如 类 型- 
为 css 计生 上 下 文 过 可 类型。 FE 
| EE | 
过 和 和 名 和 
或 和 过 各 名 称 - 
国有 司 


i 
诡计 全 十 汪 。 


二 


图 10-65 打开 网 页 文档 图 10-66 “新 建 CSS 规 则 ”对 话 框 


因 单 击 “ 确 定 ”按钮 。 弹 出 “.h 的 CSS 规 则 定义 ”对 话 框 ， 在 “分 类 ”列表 中 选择 “类 型 ”选项 ， 
将 “Font-family” 设 置 为 “宋体 ”，“ Font-size” 设 置 为 12 像 素 ，“color” 设 置 为 “#702102”， 
“Line-height” 设 置 为 350%，“Text-decoration” 设 置 为 下 划 线 ， 如 图 10-67 所 示 。 


园 设置 完毕 ， 单 击 “ 确 定 ” 按 钮 。 其 CSS 代 码 如 下 所 示 。 


eh 
font-family: "宋体 "; 
font-size: 12px; 
line-height: 350%; 
color: #702102; 
text-decoration: underline; 
} 


UD 


园 设置 完毕 ， 单 击 “ 确 定 ”按钮 。 选 择 文档 中 的 文字 ， 在 属性 面板 中 的 “目标 规则 ”下 拉 菜 单 
选择 新 建 的 样式 h， 应 用 新 建 的 样式 ， 如 图 10-68 所 示 。 


[LE 3 


Cre 


二 权 所 有 华 和 家 硬 攻 


图 10-67 “.h 的 CSS 规 则 定义 ”对 话 框 图 10-68 对 文本 应 用 样式 
国 保存 文档 ， 在 浏览 器 中 预览 效果 ， 如 图 10-69 所 示 。 


网 
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图 10-69 应 用 CSS 样 式 效 果 


| @ 中 课 后 练习 o 
@ 


一 、 填 空 题 


(1) 使 用 属性 可 以 将 小 写 的 英文 字母 转变 为 大 写 ， 而 且 在 大 写 的 同时 ， 能 够 让 
字母 大 小 保持 与 小 写 时 一 样 的 尺寸 高 度 。 
(2) 文本 的 段落 样式 定义 整 段 的 文本 特性 。 在 CSS 中 ， 主 要 包括 


和 等 。 


(3) 属性 是 为 了 添加 对 象 的 阴影 效果 的 。 它 实现 的 效果 看 上 去 就 像 使 原来 
的 对 象 离开 页 面 ， 然 后 在 页 面 上 显示 出 该 对 象 的 投影 。 
二 、 选 择 题 
(1) 字体 的 大 小 属性 用 来 定义 字体 的 大 小 。 
A. font-family B. font-size C. font-weight 
(2) 使 用 文字 修饰 属性 可 以 对 文本 进行 修饰 ， 如 设置 下 划 线 、 删 除 线 等 。 
A. text-transform B. word-spacing C. text-decoration 
(3) 可 以 把 对 象 的 可 视 化 属性 全 部 翻转 ， 包 括 色彩 、 亮 度 值 和 饱和 度 。 
A. Invert B. fipH C. Gray 
三 、 操 作 题 
应 用 CSS 样 式 效果 如 图 10-70 所 示 。 
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图 10-70 应 用 CSS 样 式 效果 


10 
@ 


文字 是 人 类 语言 最 基本 的 表达 方式 ， 文 本 的 控制 与 布局 在 网 
页 设计 中 占 了 很 大 比例 ， 文 本 与 段落 也 可 以 说 是 最 重要 的 组 成 部 分 ， 在 网 页 中 添加 文字 并 不 困 
难 ， 主 要 问题 是 如 何 编排 这 些 文字 ， 以 及 控制 这 些 文字 的 显示 方式 ， 让 文字 看 上 去 编排 有 序 、 
整齐 美观 。 本 课 主要 讲述 了 设置 文字 格式 、 设 置 段落 格式 和 滤 镜 的 使 用 。 通 过 本 课 的 学 习 ， 读 
者 应 对 网 页 中 文字 格式 和 段落 格式 的 应 用 有 一 个 深刻 的 了 解 。 


188 


第 11 课 


用 CSS 设 计 图 片 和 背景 


本 课 导 读 

图 像 是 网 页 中 最 重要 的 元 素 之 一 ， 图 像 不 但 能 美化 网 页 ， 
而 且 与 文本 相 比 能 够 更 直观 地 说 明 问题 。 美 观 的 网 页 是 图 文 并 茂 
的 ， 一 幅 幅 图 像 和 一 个 个 漂亮 的 按钮 ， 不 但 使 网 页 更 加 美观 、 生 
动 ， 而 且 使 网 页 中 的 内 容 更 加 丰富 。 可 见 ， 图 像 在 网 页 中 的 作用 
是 非常 重要 的 。 


设置 网 页 的 背景 

设置 背景 图 片 的 样式 ee 
设置 网 页 图 片 的 样式 

给 图 片 添 加 边框 

图 文 绕 排 效果 


技术 要 点 
ultimate visualization 


Ee 


党 锅 味 美食” 尽 享 生 活 


给 图 片 添加 边框 图 文 绕 排 效果 


了 课堂 实录 


背景 颜色 或 背景 图 


ba 


局 
用 


1]1.1 : 


“ee 一 个 


像 ， 能 给 


ckground 属 性 。 


11.1.1 课堂 小 实例 
颜色 


背 


在 HTML 中 


背景 颜色 ， 还 可 以 设置 文字 的 背景 颜 


基本 语法 : 


background-color: 颜色 取 值 


语法 说 明 : 


background-color 


于 设置 对 象 的 背景 颜 


色 。 青 景 颜 色 的 黑 认 值 是 透明 色 ， 大 多 数 情 | 


况 下 可 以 不 用 此 方法 进行 设置 。 


太 


六 


太 


太 


可 取 的 值 如 下 所 示 。 
颜色 名 称 : 规定 颜色 值 为 颜色 名 称 的 背 


景 颜 色 ， 如 red。 
颜 
景 颜色 ， 如 #Ht00ff。 

Rgb 名 称 : 规定 颜色 值 为 rgb 代码 的 背景 
颜色 ， 如 rgb(255.0.0)。 

Transparent: 默认 ， 背 景 颜色 为 透明 。 
使 用 “CSS 规 则 定义 ”对 话 框 的 “背景 ” 


可 


以 对 网 页 的 任何 元 素 应 上 


图 


背景 颜色 效果 如 
其 CSS 代 码 如 下 : 


11-2 所 示 。 


.table {background-color: #0000FF;} 


4able 的 CS$ 规则 定义 


EE == 


上 


ET 


有 ] [开关 _] [应 用 


190 


图 11-1 设置 背景 颜色 


旦 | 
月 至 | 


， 利 用 <body> 标 记 中 的 bgcolor 
性 可 以 设置 网 页 的 背景 颜色 ， 而 在 CSS 中 使 ， 
background-color 属 性 ， i 


背景 属性 。 例 
如 ， 定 义 一 个 表格 对 象 的 背景 颜色 ， 如 图 11-1 | 
所 示 ， 


1 


背景 属性 是 网 页 设计 中 应 用 非常 广泛 的 一 种 技术 。 通 过 
网 页 带 来 丰富 的 视觉 效果 。 


HTML 的 各 种 元 素 基本 上 都 是 支持 


ROR ~ 


| 色 。 
边框 
i 11-3 所 示 ， 网 页 中 经 常 使 用 background-color 


色 值 ， 规 定 颜色 值 为 十 六 进 制 值 的 背 | 设置 背 


| 性 值 ， 
| 图 像 
| 背景 颜色 的 设置 基本 相同 ， 使 用 background- 


上 月 末 


: image 属 性 可 以 设置 元 素 的 背景 图 


图 11-2 背景 颜色 效果 
background-color 属 性 为 元 素 设置 一 种 纯 
这 种 颜色 会 填充 元 素 的 内 容 、 内 边 距 和 
区 域 ， 扩 展 到 元 素 边框 的 外 边界 。 如 图 


背景 颜色 。 


图 11-3 网 页 背景 颜色 


1.1.2 课堂 小 实例 一 一 


图 片 
CSS 的 背景 属性 background 提 供 了 众多 属 
如 颜色 、 图 像 、 定 位 等 ， 为 网 页 背景 
的 定义 提供 了 极 大 的 便利 。 背 景 图 片 和 


片 。 


@ _。 第 11 课 上 ESESSEHSEEES 


基本 语法 : | ”了 和 解 并 熟悉 了 以 上 background 属 性 及 属 
backgrouna-image:url (图 片 地 址 ) ”性 值 之 后 ， 很 容易 地 就 可 以 对 网 页 的 背景 
语法 说 明 : | 片 做 出 合适 的 处 理 。 但 是 在 这 里 有 一 个 小 技 


图 片 地 址 可 以 是 绝对 地 址 ， 也 可 以 是 相 : 巧 ， ee el oe image 属 性 
对 地 址 。 使 用 “CSS 规 则 定义 ”对 话 框 的 “ 背 ， 之 后 ， 应 该 定义 一 个 与 背景 图 片 颜色 相近 的 
景 ”类 别 中 的 “background-image” 可 以 定义 | background- es 这 样 在 网 速 缓慢 背景 
CSS 样 式 的 背景 图 片 。 也 可 以 对 页 面 中 的 任何 | 片 未 加 载 完 成 ， 或 是 背景 图 片 丢失 之 后 ， 仍 


征 上 月 灰 
元 素 应 用 背景 属性 。 | 然 可 以 提供 很 好 的 文字 可 识别 性 。 图 11-6 所 示 
例如 定义 一 个 Div 对 象 的 背景 图 片 ， 如 图 ; 的 网 页 背景 图 片 是 一 张 黄色 的 底 图 ， 那 么 文 
11-4 所 示 ， 背 景 图 片 效果 如 图 11-5 所 示 。 ， 字 的 颜色 自然 而 然 会 选择 浅 色调 的 绿色 ， 如 
IE | 果 此 时 背景 图 片 未 加 载 完成 或 者 图 片 丢失 ， 


就 需要 定义 一 个 浅黄 色 的 背景 颜色 ， 才 可 以 
| 保持 文字 的 可 识 别 性 。 


图 11-5 背景 图 片 效果 : 图 11-6 ”网 页 背景 图 片 与 背景 颜色 类 似 
其 CSS 代 码 如 下 : : 


#apdivl {background-image: url (left bg.jpg);} 


| | ' ) 设置 背景 图 片 的 样式 
© 利用 Css 可 以 精确 地 控制 背景 图 片 的 各 项 设置 。 可 以 决定 是 


否 铺 平 及 如 何 铺 平 ， 背 景 图 片 应 该 滚动 还 是 保持 固定 ， 以 及 将 其 放 在 什么 位 置 。 


用 11.2.1 课堂 小 实例 一 -背景 图 片 重复 
使 用 CSS 来 设置 背景 图 片 同 传统 的 做 法 一 样 简单 ， 但 相对 于 传统 控制 方式 ，CSS 提 供 了 更 多 
的 可 控 选 项 ， 图 片 的 重复 方式 ， 共 有 4 种 平 铺 选 项 ， 分 别 是 no-repeat、repeat、repeat-x、repeat-y。 
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HTML+CSS 网 页 设计 与 布局 


课堂 实录 
基本 语法 : 


“ee 一 个 


background-repeat: no-repeat | repeat| repeat-x| repeat-y; 


语法 说 明 : 
background-repeat 的 属性 值 如 表 11-1 
所 示 。 
表 11-1 background-repeat 的 属性 值 
属 是 性 看 值 描 述 
no-repeat 背景 图 像 不 重复 


repeat 情景 图 像 重复 排 满 整个 网 页 
repeat-x 情景 图 像 只 在 水 平方 向 上 重复 
Tepeat-y 情景 图 像 只 在 委 直 方向 上 重复 
背景 重复 用 于 设置 对 象 的 背景 图 片 是 
否 铺 平 及 如 何 铺 排 。 必 须 先 指定 对 象 的 背景 
图 片 。 在 “背景 ”类 别 中 的 “background- 


repeat” 下 拉 列 表 中 选择 属性 值 ， 如 图 11-7 所 
11-8 所 示 。 


示 ， 效 果 如 


#apDiv1 的 CSS 规则 定义 


图 11-7 设置 重复 属性 


De re rr] @ Pp- cx 汪汪 
EE 
een WA BE WIR ono 
Fm = ER = FE 
Siow 


在 设置 背景 图 像 时 ， 最 好 同时 指定 一 种 背景 用 
色 。 这 样 在 下 载 背 景 图 像 时 ， 背 景色 会 首先 出 现 上 
帮 轩 要 帮 兴 全 这 这 人 天 交 从 的 次: 吉 | 
显示 出 来 。 


| 
平 铺 选项 是 在 网 页 设计 中 能 够 经 常 使 用 
到 的 一 个 选项 ， 例 如 网 页 中 常用 的 渐变 式 背 
景 。 采 用 传统 方式 制作 渐变 式 背 景 ， 往 往 需 
要 宽度 为 ]px 的 背景 进行 平 铺 ， 但 为 了 使 纵 启 
不 再 进行 平 铺 ， 往 往 高 度 设 为 高 于 1000px。 
采用 repeat-x 方 式 的 话 ， 只 需要 将 渐变 背景 按 
需要 高 度 设 计 就 行 ， 不 再 需要 使 用 超 高 的 图 
11-9 所 示 。 


片 来 平 铺 了 ， 如 


图 11-9 平 销 背景 图 片 


11.2.2 ”课堂 小 实例 一 一 背景 
图 片 附件 
在 网 页 中 ， 背 景 图 片 通常 会 随 网 页 的 滚 


动 而 一 起 滚动 。background-attachment 属 性 设 
置 背 景 图 片 是 否 固定 或 者 随 着 页 面 的 其 余部 


图 11-8 向 重复 效果 
其 CSS 代 码 如 下 : 


#apDivl { 
background-image: url(tqyb.gif); 
background-repeat: repeat-x; 
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分 滚动 。 
基本 语法 : 
background-attachment: scrolll|lfixed; 
语法 说 明 : 
background-attachment 的 属性 值 如 表 11-2 


| 所 示 。 


@ oo 


表 11-2 background-attachment 的 属性 值 


属 性 值 描 述 

scroll 背景 图 片 随 对 象 内 容 滚动 

fixed 当 页 面 的 其 余部 分 滚动 时 ， 背 景 
图 片 不 会 移动 


背景 图 片 ， 即 <body> 标 签 内 容 设 定 的 背景 


片 。 在 “body 的 CSS 规 则 定义 ”对 话 框 的 “ 背 | 
景 ” 类 别 中 的 “background-attachment” 下 : 
列表 中 选择 fixed 选 项 ， 即 可 实现 页 面 滚动 时 ; 


背景 图 片 保持 固定 ， 如 图 11-10 所 示 。 
其 CSS 代 码 如 下 : 


固定 背景 属性 在 网 站 中 经 


是 将 一 幅 大 的 背景 图 片 固定 ， 在 页 面 滚动 时 ， | 
网 页 中 的 内 容 可 以 浮动 在 背景 图 片 的 不 同位 置 ; 


上 。 如 图 11-11 所 示 的 网 页 ， 在 浏 
到 页 面 滚动 时 ， 背 景 图 片 仍 保持 固定 。 


国 11.2.3 洪 沁 小 实例 一 青 时 图 片 定位 


除了 图 片 重复 方式 的 设置 ，CSS 还 提供 


了 背景 i 
中 ， 即 使 使 用 图 片 ， 也 没有 办 法 提供 精确 到 
一 般 是 通过 透明 GIF 图 


像素 级 的 定位 方式 ， 


片 来 强迫 图 片 到 目标 位 置 上 的 。background- | 
position 属 性 设置 背景 图 像 的 起 始 位 置 。 : 
基本 语法 : 


语法 说 明 : 
background- position 的 属性 值 如 表 11-3 所 示 。 
表 11-3 background- position 的 属性 值 


background-position(X) 


background- position(Y) 


这 个 属性 设置 背景 原 图 片 ( 由 background- : 
image 定 义 ) 的 位 置 ， 背 景 图 像 如 果 要 重 | 
复 ， 将 从 这 一 点 开始 。 | : 
和 “background- : 


“background- position(X)” 


固定 背景 属性 一 般 都 是 用 于 整个 网 页 的 | 


常用 到 ， 一 般 都 | 


览 器 中 可 以 看 | 


第 11 课 枚 SSIS 二 证 二 


body 的 CSS 规则 定义 


分 类 


Beckeromieaaa C): [| 


ae 


EL 


图 11-11 固定 背景 网 页 


Bckgromt-color P): 加 | 
Backgromt-insee (D): Wj. jpe 
uskerazdrrepeat 因 :aoTepeat v 


position(Y)” 处 设置 其 属性 ， 如 图 11-12 所 示 ， 
效果 如 图 11-13 所 示 。 


图 11-13 背景 定位 
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课堂 买 录 eg@ 一 


CSS 代 码 如 下 : 


body {background-attachment: fixed; 


background-image: url (bj.gif); 
background-repeat: no-repeat; 
background-position: 40px 60px;} 
背景 图 片 定位 功能 可 以 
图 像 和 文字 的 混合 排版 
， 将 背景 图 片 定位 在 适合 
置 上 ， 以 获得 最 佳 的 效 
图 11-14 所 示 的 网 页 就 是 
背景 图 片 的 定位 功能 将 
片 和 文字 混 排 。 


xStrockes 


bl 
十 


图 洲 酒 下 


DY Latest News And Updates 


图 11-14 ”图片 和 文字 混 排 


“background-position(X)” 和 “background- position(Y)” 
points、inches、em 等 ， 也 可 以 使 用 比例 值 来 设 定 背 景 
background-position: 50% 5%， 实 例 效果 如 图 11-16 所 示 。 


属性 的 单位 可 以 使 用 pixels、 


图 片 的 位 置 ， 如 图 11-15 所 示 。 这 里 设 


fbody 的 cs 区 到 | | | 
分 类 a > 
到 zan mar 
中 Dkr rnt eo EC): 加 
加 | 
上 
ET EE 了 | | 
有 
图 11-15 属性 的 单位 图 11-16 50% 5% 
其 CSS 代 码 如 下 ; 


body {background-attachment: fixed; 
background-image: url(bj.gif); 
background-repeat: no-repeat; 


background-position: 50% 5%;} 


代码 “background-position: 50% 5%:;” 表 明 背 景 图 


部 5% 的 位 置 显示 。 
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距离 左 侧 30%0， 垂 直 距 离 离 顶 


@_。 第 11 课 眶 ESSHSEE 

在 背景 定位 属性 的 下 拉 列 表 中 也 提供 了 top、center、bottom 参 数值 。 在 “背景 ”类 别 中 的 

“background- position(X)” 和 “background- position(Y)” 下 拉 列 表 处 可 以 设置 这 些 参 数 ， 如 图 
11-17 所 示 。 这 里 设置 “background-position: 50% center”， 实 例 效果 如 图 11-18 所 示 。 


rx a 


图 11-17 背景 定位 属性 图 11-18 50% center 
其 CSS 代 码 如 下 : 


| | 网 页 图 片 的 样式 


在 网 页 中 恰当 地 使 用 图 像 ， 能 够 充分 展现 网 页 的 主题 和 增强 网 
页 的 美感 ， ee 网 页 中 的 图 像 包 括 Logo、Banner、 广 告 、 按 钮 及 各 
种 装饰 性 的 图 标 等 。CSS 提 供 了 强大 的 图 像样 式 控制 能 力 ， 以 帮助 用 户 设计 专业 美观 的 网 页 。 


国 11.3.1 课堂 小 实例 一 一 设置 图 片 边框 
默认 情况 下 ， 图 像 是 没有 边框 的 ， 通 过 “边框 ”属性 可 以 为 图 像 添加 边框 线 。 新 建 样式 


“#apDiv1”， 在 “边框 ”分 类 中 进行 设置 ， 如 图 11-19 所 示 。 定 义 图 像 的 边框 属性 后 ， 在 图 像 
四 周 出 现 了 4px 宽 的 实 线 边 框 ， 效 果 如 图 11-20 所 示 。 


Style ith Color 
贺 全 部 相同 ) 回 全 部 相同 下 ) 加 全 部 相同 0) 
rm aa vv [ED Wr 
Ritat@) ， [asia 7] 民 -|e rs 
poteo) [ea =] "| 
Lem. [asm | 区 "es Were 


图 11-19 设置 边框 属性 图 11-20 图 像 边框 效果 
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下 课堂 实录 


其 CSS 代 码 如 下 : 
#apDivl {border: 4px solid #FF6633;} 

在 边框 分 类 中 的 “样式 ”下 拉 列 表 中 可 
以 选择 边框 的 样式 外 观 。Dreamweaver 在 文 
档 窗口 中 将 所 有 样式 呈现 为 实 线 。 取 消 选择 
“全 部 相同 ” 复 选 项 可 设置 元 素 各 个 边 的 边 
框 style。“width” 设 置 元 素 边框 的 粗细 。 
“color” 设 置 边框 的 颜色 。 可 以 分 别 设置 每 
条 边框 的 颜色 。 

例如 设置 4px 的 虚线 边框 ， 如 图 11-21 所 
示 ， 实 际 效 果 如 图 11-22 所 示 。 


#apDiyl 的 C55 规则 定义 


图 11-23 点 划 线 效果 


Style Width 
回 全 部 相同 人 名) 回 全 部 相同 到 ) 

Top 加) 司 加 | 四 
Right 四) me 
Botton @) we 
Lat D) 下 


图 11-21 设置 边框 属性 图 11-24 双 线 效果 


(3) 设置 “border: 30px groove 
考 F6633:”， 效 果 如 图 11-25 所 示 。 


Lr | 


图 11-22 虚线 效果 图 

其 CSS 代 码 如 下 : 
#apDivl {border: 4px dashed #FF6633;} 

通过 改变 边框 style、width 和 color， 可 以 
得 到 下 列 各 种 不 同 效果 。 

(1) 设置 “border: 4px dotted 
#EF6633;”， 效 果 如 图 11-23 所 示 。 

(2) 设置 “border: 8px double 
FF6633;”， 效 果 如 图 11-24 所 示 。 


图 11-25 槽 状 效果 
(4) 设置 “border:30px ridge 
手 F6633:”， 效 果 如 图 11-26 所 示 。 
(C5) 设置 “border: 30px inset 
: 手 F6633:”， 效 果 如 图 11-27 所 示 。 
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SotoTop 


About Us 


Design Services 


Vestibuhm pharatr convalts Dor ac ctus, Fr 
hr um 0 wrne oper iperdier porta wipe. 


图 11-29 图 片 就 使 用 了 边框 样式 


姑 11.3.2 课堂 小 实例 一 图 文 


混合 排版 


图 11-27 3D 四 陷 效 果 | 在 网 页 中 只 有 文字 是 非常 单调 的 ， 因 此 

(6) 设置 “border: 30px outset | 在 段落 中 经 常会 插入 图 像 。 在 网 页 构成 的 诸 
#FF6633;”， 效 果 如 图 11-28 所 示 。 | 多 要 素 中 ， 图 像 是 形成 设计 风格 和 吸引 视觉 
| 的 重要 因素 之 一 。 图 11-30 所 示 的 网 页 就 是 图 


| 文 混 排 的 网 页 。 


图 11-28 3D 思 出 效果 : 
图 11-29 所 示 的 网 页 中 的 图 片 就 使 用 了 边 ; 
框 样式 。 | 


图 11-30 图 文 混 排 网 页 
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ET 识 堂 实录 ~e—® 


可 以 先 插入 一 个 Div 标 签 ， 再 将 图 像 插入 | ont: eins 
Div 对 象 中 。 新 建 样式 .pic， 设 置 Float 属 性 为 | padding: 10px;} 


right， 使 文字 内 容 显示 在 img 对 象 旁 边 ， 从 而 实 
现 文字 环绕 图 像 的 排版 效果 ， 如 图 11-31 所 示 。 ”| 


[二 


可 区 ER 
raaaine murea ! 
可 全 部 相同 人 ) 辆 全 部 相同 F) ! 
ToplF) ; 0 = Top tO) = [x | 四 
iahtg) : 加 ug 医 ! 了 A 
aettmg) :加 ED > 攻 : 本 加权 下 /和 务 
wa ee ho 医 ! 国庆 去 去， 有 国民 ， 半 化 只 2 时 


pp 


名 全 的 专业 报 务 


部 助 0 L_ 证 _] [取消 应 用 以 ) 


图 11-31 方 框 属性 设置 IE 
为 了 使 文字 和 图 像 之 间 保留 一 定 的 内 边 | 

距 ， 还 要 定义 .pic 的 Padding 属 性 ， 预 览 效果 | 

如 图 11-32 所 示 。 | 
其 CSS 代 码 如 下 : 


图 11-32 图 像 居 右 效果 
如 果 要 使 图 像 居 左 ， 用 同样 的 方法 设置 
“float: left” 其 代码 如 下 : 


.pic {float: left; 


3 padding: 10px;} 


] ] 


前 面 几 节 我 们 学 习 了 图 像 和 背景 的 设置 ， 下 面 我 们 通过 一 些 
实例 来 具体 讲述 操作 步骤 ， 以 达到 学 以 致 用 的 目的 。 


国 11.4.1 ”实战 1 一 给 图 片 添加 边框 

图 像 是 网 页 中 最 重要 的 元 素 之 一 ， 美 观 的 图 像 会 为 网 站 增添 生命 力 ， 同 时 也 加 深 用 户 对 网 

站 的 印象 。 下 面 讲述 图 像 边框 的 添加 ， 具 体操 作 步 又 如 下 所 述 。 

国 打开 网 页 文档 ， 将 光标 置 于 网 页 文档 中 要 插入 图 像 的 位 置 ， 如 图 11-33 所 示 。 

园 选择 “插入 ”|“ 图 像 ”|“ 图 像 ” 命 令 ， 弹 出 “选择 图 像 源 文件 ”对 话 框 ， 从 中 选择 需要 的 图 
像 文件 ， 如 图 11-34 所 示 。 


尽 引 宇 一 


品味 美食 


me 二 


mA ta WEF ss Par, FREESE 


ee Ce Cw | 


图 11-33 ”打开 网 页 文档 图 11-34 “选择 图 像 源 文件 ”对 话 框 
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@_。 第 11 课 上 咀 ESSSS 过 下 


园 单 击 “ 确 定 ”按钮 ， 图 像 就 插入 到 网 页 中 | 
了 ， 如 图 11-35 所 示 。 


[7 me- 国 @OLieLz 


图 11-35 插入 图 像 


园 新 建 CSS 样 式 ， 在 “.tu 的 CSS 规 则 定义 ” 
对 话 框 中 选择 “边框 ”分 类 选项 ， 在 对 话 
框 中 将 Style 样 式 设置 为 solid，width 设 置 为 
medium，color 设 置 为 杜 F5603， 如 图 11-36 
所 示 。 


sile Wi ca 

同 全 部 相同 G) 闭 全 部 相 司 人) 财 全 部 相 本 人 ) 

rm: mold » nlim vl -| Mes 
Mm : one peam -| -| 
Bug : [oud | eim 区 7] re 
Rw: Ene 7 hem 7 | 


图 11-36 设置 边框 属性 


园 选中 图 像 ， 打 开 属性 面板 ， 在 面板 中 的 | 
Class 中 选择 新 建 的 样式 “.tu”， 应 用 新 建 ; 


的 样式 ， 如 图 11-37 所 示 。 
园 应 用 样式 后 ， 可 以 清晰 地 看 到 图 像 的 线 框 ， 
预览 效果 如 图 11-38 所 示 。 


上 11.4.2 ”实战 


图 11-37 应 用 样式 


li “~ ti 


品味 美食 ” 尽 拿 生活 


人 Me A RL 


mE HE OK Wh, RAE 
arm RGA OA fh Eh. SHO 


图 1-38 边框 效果 


排 效 果 


利用 Dreamweaver 制 作 网 页 时 ， 在 插入 图 


片 后， 文字 会 强迫 移动 到 图 片 的 下 一 列 ， 留 
的 空白 过 多 。 可 以 用 CSS 语 法 让 文字 直接 环绕 


图 片 而 不 需要 使 用 图 层 。 


国 打开 网 页 文档 ， 如 图 11-39 所 示 。 
| 园 新 建 样式 .tw1， 打 开 “. tw1 的 CSS 规 则 定 


义 ” 对 话 框 ， 在 对 话 框 中 选择 “ 方 框 ” 选 
项 ， 在 对 话 框 中 将 Float 属 性 设置 为 right， 为 

了 使 文字 和 图 像 之 间 保留 一 定 的 内 边 距 ， 

将 padding 设 置 为 “全 部 相同 ”， 如 图 11-40 
所 示 。 


ET 刘 堂 买 录 ~e—® 


DW sn an Sem EA me mtiol S30 ei BHM za . Bollelx 
ae - 


EE a 3 国 cas= 


a FE 
E3 


图 11-39 打开 网 页 文档 图 11-40 “.twl1 的 CSS 规 则 定义 ”对 话 框 
其 CSS 代 码 如 下 : 


选中 要 设置 图 文 绕 排 的 图 片 ， 打 开 属性 面板 ， 在 面板 中 的 Class 中 的 下 拉 菜 单 中 选择 新 建 的 样 
式 ， 如 图 11-41 所 示 。 

新 建 样式 .tw2， 打 开 “.tw2 的 CSS 规 则 定义 ”对 话 框 ， 在 对 话 框 中 选择 “ 方 框 ” 选 项 ， 将 
Float 属 性 设置 为 left， 为 了 使 文字 和 图 像 之 间 保留 一 定 的 内 边 距 ， 将 padding 设 置 为 全 部 相 

同 ， 如 图 11-42 所 示 。 


DW sun Sun sv EA pam wtiol asi wel) gOMW smo 古国 Olelxl 
intechm > 
mm 
BS, FRE i 
7 
本 ， 
[mam pad IAD Dl DD Vi Er ES 
本 


图 11-41 应 用 样式 图 11-42 “.tw2 的 CSS 规 则 定义 ”对 话 框 
其 CSS 代 码 如 下 : 


园 同样 我 们 也 选中 第 二 个 图 片 ， 设 置 其 图 文 绕 排 ， 如 图 11-43 所 示 。 
国 保存 文档 ， 按 <F12> 键 ， 在 浏览 器 中 预览 效果 ， 如 图 11-44 所 示 。 


@ _。 第 11 课 眶 ESSHSEE 


网 站 革 页 。 关于 去 条 。 新 所 中心 二 共 全 产 作 委 。 工程 完全 客户 是 务 。 技术 奖 科 。 在 失言 联系 雪 们 


an 


sa 
Ce 


图 11-43 设置 图 片 属性 图 11-44 图 文 绕 排 效 果 


| | F EE] 
@ 

一 、 填 空 题 

(1) 在 HIML 中 ， 利 用 <body> 标 记 中 的 属性 可 以 设置 网 页 的 背景 颜色 ， 而 在 
CSS 中 使 用 属性 ， 不 但 可 以 设置 网 页 的 背景 颜色 ， 还 可 以 设置 文字 的 背景 颜色 。 

(2) 使 用 CSS 来 设置 背景 图 片 同 传统 的 做 法 一 样 简单 ， 但 相对 于 传统 控制 方式 ，CSS 提 
供 了 更 多 的 可 控 选 项 ， 图 片 的 重复 方式 ， 共 有 4 种 平 铺 选 项 ， 分 别 是 
~ 和 等 

(3) 在 网 页 中 ， 背 景 图 片 通常 会 随 网 页 的 滚动 而 一 起 滚动 。 属性 设置 背景 
图 片 是 否 固定 或 者 随 着 页 面 的 其 余部 分 滚动 。 
二 、 操 作 题 


应 用 CSS 样 式 创建 图 像 的 边框 效果 ， 如 图 11-45 所 示 。 
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图 11-45 应 用 CSS 样 式 创建 图 像 边框 效果 


] ] 
@ 


本 课 主 要 介绍 CSS 设 置 网 页 的 背景 和 背景 图 片 样式 的 方法 。 
通过 本 课 的 学 习 ， 使 读者 对 网 页 中 的 图 像 有 了 更 深刻 的 认识 ， 不 但 使 网 页 更 加 美观 、 生 动 ， 而 
且 使 网 页 中 的 内 容 更 加 丰富 。 
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第 12 课 
用 CSS 制 作 实 用 的 菜单 


| 
0 和 网 站 导航 


本 课 导 读 

在 HTML 文 档 中 ， 列 表 用 于 提供 结构 化 的 、 
容易 阅读 的 消息 格式 ， 可 以 帮助 访问 者 方便 地 找 
到 信息 ， 并 引起 访问 者 对 重要 信息 的 注意 。 本 课 
将 介绍 多 种 不 同类 型 的 列表 ， 包 括 无 序列 表 及 有 
序列 表 等 。 


技术 要 点 
列表 控制 概述 
列表 样式 控制 
横 排 导航 


实现 背景 变换 的 导航 菜单 
利用 CSS 制 作 横向 导航 


太 
太 
太 
太 ” 竖 排 导航 
太 
女 
友 ”制作 网 页 下 拉 莱 单 


和 课堂 实录 


列表 用 于 将 相关 联 的 信息 集合 在 一 起 ， 这 样 这 些 相 关联 的 信 
息 就 被 紧密 地 相互 联系 在 一 起 ， 便 于 人 们 阅读 。 在 现代 Web 开 发 中 ， 列 表 是 广泛 使 用 的 元 素 ， 
频繁 地 用 于 导航 和 一 般 内 容 中 。 

从 文档 结构 上 来 看 ， 因 为 使 用 列表 有 助 于 创建 出 结构 良好 、 更 容易 访问 且 易 于 维护 的 Web 
文档 ， 因 此 使 用 列表 是 很 好 的 选择 。 此 外 列表 还 为 你 提供 了 可 附加 CSS 样 式 的 额外 元 素 ， 有 助 
于 应 用 各 种 样式 。 

HTML 有 3 种 列表 形式 : 排序 列表 (Ordered List) ; 不 排序 列表 (Unordered List) ; 定义 
列表 (Definition List) 。 

排序 列表 (Ordered List) : 排序 列表 中 ， 每 个 列表 项 前 标 有 数字 ， 表 示 顺 序 。 排 序列 表 由 
<ol> 开 始 ， 每 个 列表 项 由 <li> 开 始 。 

不 排序 列表 (Unordered List) : 不 排序 列表 不 用 数字 标记 每 个 列表 项 ， 而 采用 一 个 符号 标 

志 每 个 列表 项 ， 比 如 圆 黑 点 。 不 排序 列表 由 <ul> 开 始 ， 每 个 列表 项 由 <li> 开 始 。 
定义 列表 : 定义 列表 通常 用 于 术语 的 定义 。 定 义 列 表 由 <dl> 开 始 。 术 语 由 <df> 开 始 ， 英 文 
意 为 Definition Term。 术 语 的 解释 说 明 ， 由 <dd> 开 始 ，<dd></dd> 里 的 文字 缩 进 显示 。 


| 0 a 列表 样式 控制 


列表 是 一 种 非常 实用 的 数据 排列 方式 ， 它 以 条 列 式 的 模式 来 
显示 数据 ， 可 以 帮助 访问 者 方便 地 找到 所 需 信息 ， 并 引起 访问 者 对 重要 信息 的 注意 
人 目 12.2.1 课堂 小 实例 一 ul 无 序列 表 

无 序列 表 是 Web 标 准 布局 中 最 常用 的 样式 ，ul 用 于 设置 无 序列 表 ， 在 每 个 项 目 文字 之 前 ， 以 项 

目 符号 作为 每 条 列表 项 的 前 级 ， 各 个 列表 之 间 没 有 顺序 级 别 之 分 。 表 12-1 所 示 为 ul 标记 的 属性 。 

表 12-1 ul 标记 的 属性 定义 

属 性 名 说 明 

标记 固有 属性 type= 项 目 符合 定义 无 序列 表 中 列表 项 的 项 目 符号 图 形 样式 
id 


在 文档 范围 内 的 识别 标志 


class 


可 在 其 他 位 置 定 lang 语言 信息 

义 的 属性 dir 文本 方向 
title 标记 标题 
style 行内 样式 信息 

基本 语法 : 

<ul> 

<1i> 列 表 </1i> 

<1i> 列 表 </1i> 

<1i> 列 表 </1i> 
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语法 说 明 : 
在 该 语法 中 ，<ul> 和 </ul> 标 记 表示 无 序列 表 的 开始 和 结束 ，<li> 则 表示 一 个 列表 项 的 开 
始 。 在 “代码 ”视图 中 输入 如 下 代码 ， 如 图 12-1 所 示 。 


代码 中 加 粗 的 部 分 用 来 设置 无 序列 表 ， 运 行 代码 在 浏览 器 中 预览 网 页 ， 如 图 12-2 所 示 ， 每 
全 要 


A 


. 
必 9 


en 
生动 时 间 ， 

3201 年 月 29 日 _a 朋 30B 
活动 内 容 : 

网 各 天 的 客户 ， 可 攻 情 0090 元 的 案 电 共 全 ; 

购 丈 三 房 的 安 户 ， 可 装 久 20000 元 的 家 所 基 全 : 

网 两 的 客户 ， 可 就 各 10000 元 的 守 所 基 多 


Er 


图 12-1 代码 ” 视图 | 图 12-2 设置 无 序列 表 
国 12.2.2 课堂 小 实例 一 -ol 有 序列 表 一 一 一 一 一 一 一 一 一 一 0 
有 序列 表 使 用 编号 ， 而 不 是 项 目 符号 来 进行 排列 ， 列 表 中 的 项 目 采用 数字 或 英文 字母 开 


205 


YET 课堂 实录 “~e® 


头 ， 通 常 各 项 目 之 间 有 先后 顺序 性 。ol 标 记 的 属性 及 其 介绍 如 表 12-2 所 示 。 
表 12-2 ol 标记 的 属性 定义 


type 项 目 符合 有 序列 表 中 列表 项 的 项 目 符号 格式 

| 有 序列 表 中 列表 项 的 起 奴 数字 
id 在 文档 范围 内 的 识别 标志 
lang 语言 信息 

人 下 文本 方向 
title 标记 标题 
style 行内 样式 信息 

基本 语法 : 


语法 说 明 : 
在 该 语法 中 ，<ol> 和 </ol> 标 记 标志 着 有 序列 表 的 开始 和 结束 ， 而 <1i> 和 </i> 标 记 表示 一 个 
列表 项 的 开始 。 
在 “代码 ”视图 中 输入 如 下 代码 ， 如 图 12-3 所 示 。 


运行 代码 在 浏览 器 中 预览 网 页 ， 如 图 12-4 所 示 。 


[Dw xp wm em mm PE ee mes 
twa nin x me ET 


EE 


OE cum cnrens sanamm 


[Bm cnr mr 


rr FE 
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与 王 名称 价格 ( 单 镁 : 元 ) 时 知 
1 标准 言 1550 无 
了 豪华 许 1800 有 
3 营 通 村 房 2300 有 
清寺 EE 中 
1 E 二 一 一 一 一 
图 12-3 输入 代码 图 12-4 设置 有 序列 表 


@ oo 第 12 课 EEESFIEN 于 了 二 激 


由 12.2.3 课堂 小 实例 一 -dl 定义 列表 一 一 一 一 一 一 一 一 一 一 ?0 
定义 列表 由 两 部 分 组 成 ， 包 括 定义 条 件 和 定义 描述 。 定 义 列表 由 <dl> 元 素 起 始 和 结尾 
<dt> 用 来 指定 定义 条 件 ，<dd> 用 来 指定 定义 描述 。 
基本 语法 : 


在 代码 视图 中 输入 如 下 代码 ， 如 图 12-5 所 示 。 


代码 中 加 粗 的 部 分 用 来 设置 定义 列表 ， 运 行 代码 在 浏览 器 中 预览 网 页 ， 如 图 12-6 所 示 。 


| mm. 国 OEisLz 


22 3Wndexd homl ETI 5 
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国 Ee 


图 12-5 ”代码 视图 图 12-6 设置 定义 列表 
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用 12.2.4 ”更改 列 表 项 目 样式 一 一 一 一 一 一 一 一 一 一 一 一 0 


使 用 start 属 性 可 以 调整 有 序列 表 的 起 始 数值 ， 这 个 数值 可 以 对 数字 起 作用 ， 也 可 以 作用 于 
英文 字母 或 者 罗马 数字 。 
基本 语法 : 


在 “代码 ”视图 中 输入 如 下 代码 ， 如 图 12-7 所 示 。 


在 代码 中 加 粗 的 代码 标记 将 有 序列 表 的 起 始 数值 设置 为 从 第 5 个 小 写 英文 字母 开始 ， 在 浏 
览 器 中 浏览 效果 ， 如 图 12-8 所 示 


EE 


El 


图 12-7 代码 视图 图 12-8 设置 有 序列 表 的 起 始 数值 
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| 0 3 横 排 导航 一 一 一 一 一 一 一 一 一 9 


网 站 导航 都 含有 超 链接 ， 因 此 ， 一 个 完整 的 网 站 导航 需要 创 
建 超 链接 样式 。 导 航 栏 就 好 像 一 本 书 的 目录 ， 对 整个 网 站 有 着 很 重要 的 作用 。 


有 12.3.1 课堂 小 实例 一 一 文本 导航 

横 排 导 航 一 般 位 于 网 站 的 顶部 ， 是 一 种 [ER 
比较 重要 的 导航 形式 。 图 12-9 所 示 是 一 个 用 表 。 | sr 江 
格式 布局 制作 的 横 排 导航 。 

根据 表格 式 布局 的 制作 方法 ， 图 12-9 所 
示 的 导航 一 共 由 6 个 栏目 组 成 ， 所 以 需要 在 网 
页 文档 中 插入 1 个 1 行 6 列 的 表格 ， 在 每 行 单元 
格 dd 标 签 内 添加 导航 文本 ， 其 代码 如 下 。 


图 12-9 横 排 导航 


可 以 使 用 ul 列表 来 制作 导航 。 实 际 上 导航 也 是 一 种 列表 ， 可 以 理解 为 导航 列表 ， 导 航 中 的 
每 个 栏目 就 是 一 个 列表 项 。 用 列表 实现 导航 的 XHTML 源 代码 如 下 。 


其 中 ，#nmav 对 象 是 列表 的 容器 ， 列 表 效 果 如 图 12-10 所 示 。 


209 


DT 课堂 实录 


零 


图 12-10 列表 效果 


定义 无 序列 表 nav 的 边 距 ， 及 填充 均 为 
并 设置 字体 大 小 为 12px。 


#nav { font-size:12px; 
margin:0; 
padding:0; 


white-space:nowrap; } 


不 希望 菜单 还 未 结束 就 另 起 一 行 ， 强 制 
在 同一 行内 显示 所 有 文本 ， 直 到 文本 结束 或 
者 遇 到 br 对 象 。 


太 “display:inline:”: 内 联 (行内 ) ,将 1i 
限制 在 一 行 来 显示 。 

六 “list-style-type: none;”: 列表 项 预 设 标 
记 为 无 。 | 

六 “padding:5px 8px;”: 设置 链接 的 填 | 
充 ， 上 下 为 5px 左 右 为 8px。 | 

六 “line-height:22px;”: 设置 链接 的 行 高 


太 
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#nav li {display:inline; 
list-style-type: none;} 

#nav li a { padding:5px 8px; 
line-height:22px;} 


为 22px。 
#navlia:link,#navlia:visited{color:#fff; 


text-decoration:none; 
background:#06f;} 


#navlia:hover{background-color: #090;} 


定义 链接 的 link、visited。 
“color:#fff:”， 字体 颜色 为 白 


“ee 一 全 


友 “text-decoration:none:”: 去 除了 链接 文 
字 的 下 划 线 ; 

友 “background:#06f;”: 链接 在 link、 
visited 状 态 下 背景 色 为 蓝 色 。 

太 “a:hover” 状 态 下 “background-color: 
#090;”: 鼠标 激活 状态 链接 的 背景 色 为 
绿色 。 

至 此 就 完成 了 这 个 实例 ，CSS 横 向 文本 导 

航 最 终 效 果 如 图 12-11 所 示 。 

gi [es 
DR 

由 瑟 crvtrcssmmawss x 

| 交 # 有 本日” 瑟 丰 M A 工具 Tm 吉 b(H) | 

| I ee 3 

| 

| 

| 

| 

| 

图 12-11 文本 导航 
利用 CSS 制 作 的 横向 文本 导航 在 网 页 上 比 
较 常 见 ， 图 12-12 所 示 为 网 页 项 部 的 横 排 文本 


加 Testimonlals 


吉 Latest News 


图 12-12 ”网 页 顶部 的 横 排 文 本 导航 


@ oo 第 12 刘 上 SS 本 下 革 芋 二天 末 
人 肯 12.3.2 课堂 小 实例 一 -标签 式 导 航 


在 横 排 导 航 设计 中 经 常会 遇见 一 种 类 似 。 祝 223 
文件 夹 标签 的 样式 。 这 种 样式 的 导航 不 仅 美 ”外 86 部 ) 国 叶 和 Ee 
观 ， 而 且 能 够 让 浏览 者 清楚 地 知道 目前 处 在 Look Towords A New Future Tle [| 
一 个 栏目 ， 因 为 当前 栏目 标签 会 呈现 与 其 0 i 
他 栏目 标签 不 同 的 颜色 或 背景 。 图 12-13 所 示 。 是 seeneeea 
的 网 页 项 部 的 导航 就 是 标签 式 导航 。 
要 使 某 一 个 栏目 成 为 当前 栏目 ， 必 须 对 
这 个 栏目 的 样式 进行 单独 设计 。 对 于 标签 式 导 
航 ， 首 先 从 比较 简单 的 文本 标签 式 导 航 入 手 。 


久 Highlights 
erat a erat. Hullam omare, mi sc Placerat ultrices, pede arcu crnere tetlus, Id 
证 


Cam ere teen ra ma ain phe ese teeta pon ens we 
ome rm 
or de ne 


re ee eet Pre em tau av bore ha met ci me 
Ce 


图 12-13 标签 式 导航 


<div id="tabs"> 
<ul> 
<li><a href="#"><span> 手 机 通讯 </span></a></1i> 
<1i><a href="#"><span> 手 机 配件 </span></a></1i> 
<1i><a href="#"><span> 数 码 影 像 </span></a></1i> 
<1i><a href="#"><span> 时 尚 影音 </span></a></1i> 
<1i><a href="#"><span> 数 码 配件 </span></a></1i> 
<1i><a href="#"><span> 电 脑 整 机 </span></a></1i> 
<1i><a href="#"><span> 电 脑 软件 </span></a></1i> 


</ul> 
</div> 
CSS 代 码 如 下 ， 效 果 如 图 12-14 所 示 。 


手机 通讯 | 手机 配件 | 数码 影像 | 时 尚 影 数码 电脑 电脑 软件 


图 12-14 标签 式 导 航 


2 
font: bold 14px "黑体 "; 
color: #000; 
margin: Opx; 
padding: Opx Opx Opx 15px; 
} 
/* 定义 #tabs 对 象 的 浮动 方式 、 宽 度 、 背 景 颜色 、 字 体 大 小 、 行 高 和 边框 +/ 
#tabs { 
float:left; 


2 
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| pa 人 课堂 小 实例 一 一 坚 排 导航 
竖 排 导航 是 比较 常见 的 导航 ， 下 面 制作 图 12-15 所 示 的 CSS 竖 
排 导航 ， 具 有 立体 的 美感 ， 鼠 标 事 件 引 发 边框 和 背景 属性 变化 。 


Dreamweaver 


Flash 


Fireworks | 


一 一 -一 


图 12-15 坚 排 导航 
(1) 在 <body> 与 </body> 之 间 输入 以 下 代码 。 


(2) #nave 对 象 是 竖 排 导航 的 容器 ， 其 CSS 代 码 如 下 。 
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] 0 实战 应 用 一 用 
网 站 需要 导航 菜单 来 组 织 和 完成 网 页 间 的 跳 转 和 互 访 。 浏 览 


网 页 时 ， 设 计 新 颖 的 导航 菜单 能 给 访问 者 带 来 极 大 的 浏览 兴趣 。 下 面 将 通过 实例 详细 介绍 导航 
菜单 的 设计 方法 和 具体 CSS 代 码 。 


目 12.5.1 实战 实现 背景 变换 的 导航 菜单 
导航 也 是 一 种 列表 ， 每 个 列表 数据 就 是 导航 中 的 一 个 导航 频道 ， 使 用 al] 元素、1 元 素 和 CSS 
样式 可 以 实现 背景 变换 的 导航 菜单 ， 具 体操 作 步 骤 如 下 。 
启动 Dreamweaver， 打 开 网 页 文档 ， 切 换 到 代码 视图 中 ， 在 <head> 与 </head> 之 间 相 应 的 位 置 输 
入 以 下 代码 。 


CSS 制 作 实 


将 光标 放置 在 相应 的 位 置 ， 选 择 “ 插 
入 ”| “标签 ”命令 ,插入 标签 ， 在 标签 
“属性 ”面板 中 的 Div ID 下 拉 列 表 中 选择 
menu。 
切换 到 代码 视图 ， 在 Div 标 签 标记 中 输入 代 
码 “<ul></ul>”。 
; 因 在 设计 视图 中 的 Div 标 签 中 输入 文字 “ 首 
| 页 ”， 在 “属性 ”面板 中 的 链接 文本 框 中 
| 进行 链接 。 
| 园 切换 到 拆 分 视图 在 “<a href->” 的 前 面 输 入 
| 代码 “<i>”， 在 “<a>” 的 前 面 输入 代码 “< 
: We 
| 园 按照 以 上 步 又， 创建 其 他 的 导航 条 。 保 存 广 
| 档 ， 按 <F12> 键 在 浏览 器 中 预览 效果 ， 如 图 
12-16 所 示 。 


图 12-16 背景 变换 的 导航 菜单 


12.5.2 ”实战 2 一 一 利用 CSS 
制作 横向 导航 一 一 2 
利用 CSS 制 作 横向 导航 ， 具 体操 作 步 又 如 
所 述 。 
打开 HTML 文 档 ， 在 <head> 与 </head> 之 间 
相应 的 位 置 输入 以 下 代码 。 


课堂 买 录 “~e® 


! 一 二 [ee < 
! | 二 DyceRrmr Se PD- OX Ee 


! Bowecsnners. 7 
ZH BRS EBM Wh) 工 RD mb(H) 


保存 文档 ， 在 浏览 器 中 浏览 效果 ， 如 图 | -一 - 
12-17 所 示 。 图 12-17 利用 CSS 制 作 横 向 导航 


国 12.5.3 ”实战 3 一 用 背景 图 片 实现 CSS 柱 状 图 表 
人 们 经 常 需要 在 网 页 上 表现 一 些 数据 的 统计 图 表 ， 通 常情 况 下 ， 是 先 用 一 些 软件 画 出 图 
表 ， 然 后 转换 成 GIF 或 JPEG 格 式 保存 ， 再 用 img 标 记 插入 网 页 中 。 这 些 图 片 常常 会 占 去 网 页 本 
身 大 小 的 很 大 比例 ， 影 响 到 网 页 的 传输 速度 。 
常 接触 统计 图 表 的 人 会 注意 到 ， 很 多 图 表 其 实 比较 简单 ， 比 如 柱状 的 统计 图 ， 就 是 由 简单 
的 矩形 块 拼合 。 下 面 就 来 介绍 这 种 柱状 统计 图 的 CSS 制 作法 。 
首先 需要 一 个 作为 背景 的 框 ， 然 后 是 4 个 矩形 的 柱子 ， 可 以 使 用 Div， 如 图 12-18 所 示 ，xhtml 代 
码 如 下 。 


图 12-18 xhtml 代码 
接 下 来 就 要 设 定 它们 的 CSS 属 性 ， 在 网 页 的 <head> 与 </head> 之 间 输 入 CSS 代 码 如 下 ， 如 图 12-19 
所 示 。 
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@ oo 第 12 刘 上 SS 本 下 于 下 3 大 末 


background:url (02008428202910.gif) #fff no-repeat scroll -220px -102px;} 
</style> 


园 在 浏览 器 中 浏览 ， 效 果 如 图 12-20 所 示 ， 可 以 看 到 用 背景 图 片 实现 CSS 柱 状 图 表 。 


图 12-19 输入 CSS 代 码 图 12-20 用 背景 图 片 实现 CSS 柱 状 图 表 


位 12.5.4 “实战 4 一 一 树 形 导航 菜单 
可 用 于 多 级 分 类 菜单 ， 此 菜单 特效 的 特点 为 ， 可 展开 对 应 图 标 变化 为 “ 减 号 ”， 收 缩 状态 
对 应 图 标 为 “加 号 ”， 可 鼠标 控制 展开 与 收缩 ， 如 图 12-21 所 示 。 


C3) EL 
- 一 级 分 类 


= DIVCSS5 (414) 
= 奥迪 3986) 
> 阿尔 法 - 罗 米 欧 (332) 


-一 级 分 类 


= - 季 分 类 064) 
半 隐 850 
圭 用 870 

= 宝马 B5) 
全 3 系 

进口 宝马 5 系 

全 3x1 
全 有 Gran Coupe 
Acs5 

三 人 四 

三 所 京 09) 


图 12-21 树 形 导 航 菜单 
其 html 代 码 如 下 。 


<!doctype html> 
<html> 


号] 区 


TIE 课堂 实录 “~e® 


买 用 的 菜单 和 网 站 导航 


其 CSS 样 式 代 码 如 下 。 


2 同 课堂 实录 ~e—® 


| 0 O 课 后 练习 : 
© 
填空 是 


(1) 无 序列 表 是 Web 标 准 布局 中 最 常用 的 样式 ， 用 于 设置 无 序列 表 ， 在 每 个 项 
目 文字 之 前 ， 以 项 目 符号 作为 每 条 列表 项 的 前 缀 ， 各 个 列表 之 间 没 有 顺序 级 别 之 分 。 


(2) 定义 列表 由 两 部 分 组 成 ， 包 括 定义 条 件 和 定义 描述 。 定 义 列表 由 元 素 起 始 
和 结尾 ， 用 来 指定 定义 条 件 ， 用 来 指定 定义 描述 。 

(3) 使 用 属性 可 以 调整 有 序列 表 的 起 始 数值 ， 这 个 数值 可 以 对 数字 起 作用 ， 
也 可 以 作用 于 英文 字母 或 者 罗马 数字 。 


列表 是 一 种 非常 有 用 的 数据 排列 方式 ， 它 以 列表 的 形式 来 显 
示 数 据 。 HIML 中 共有 3 种 列表 ， 分 别 是 无 序列 表 、 有 序列 表 和 定义 列表 ， 以 及 各 种 导航 的 制 
作 。 一 个 优秀 的 网 站 ， 菜 单 和 导航 是 必 不 可 少 的 ， 导 航 菜单 的 风格 往往 也 决定 了 整个 网 站 的 风 
格 ， 因 此 很 多 设计 者 都 会 投入 很 多 的 时 间 和 精力 来 制作 各 式 各 样 的 导航 。 
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第 13 课 
CSS 盒 子 模型 与 定位 


本 课 导 读 

如 果 你 想 尝 试 一 下 不 用 表格 来 排版 网 页 ， 
而 是 用 CSS 来 排版 你 的 网 页 ， 提 高 网 站 的 竞争 
力 ， 那 么 你 一 定 要 接触 到 CSS 的 盒子 模式 ， 这 是 
CSS 十 DIV 排版 的 核心 所 在 。 传 统 的 表格 排版 是 
通过 大 小 不 一 的 表格 和 表格 庶 套 来 定位 排版 网 页 
内 容 ， 改 用 CSS 排 版 后 ， 就 是 通过 由 CSS 定 义 的 
大 小 不 一 的 盒子 和 盒子 嵌 套 来 编排 网 页 。 因 为 用 
这 种 方式 排版 的 网 页 代码 简洁 ， 更 新 方便 ， 能 兼 
容 更 多 的 浏览 器 。 


技术 要 点 


太 “盒子 "与 “模型 ”的 概念 
太 “理解 盒子 模型 
太 “掌握 盒子 的 浮动 
太 ”掌握 金子 的 定位 


和 加 课堂 实录 


] 3 ] “盒子 ”与 “模型 ”的 概念 一 。 
@ 如 果 想 熟 练 掌握 Div 和 CSS 的 布局 方法 ， 首 先 要 对 盒 了 模型 有 


足够 的 了 解 。 盒 子 模型 是 CSS 布 局 网 页 时 非常 重要 的 概念 ， 只 有 很 好 地 掌握 了 盒子 子 模型 ， 以 
及 其 中 每 个 元 素 的 使 用 方法 ， 才 能 真正 地 布局 网 页 中 各 个 元 素 的 位 置 。 

所 有 页 面 中 的 元 素 都 可 以 看 作 一 个 装 了 东西 的 盒子 ， 盒 子 里 面 的 内 容 到 盒子 的 边框 之 间 的 
距离 即 填充 (padding) ， 盒 子 本 身 有 边框 (border) ， 而 盒子 边框 外 和 其 他 盒子 之 间 ， 还 有 边 
界 (margin) 。 上 默认 情况 下 盒子 的 边框 是 无 ， 背 景色 是 透明 ， 所 以 我 们 在 默认 情况 下 看 不 到 盒子 。 

一 个 盒子 由 四 个 独立 部 分 组 成 ， 如 图 13-1 所 示 。 

最 外 面 的 是 边界 (margin) 。 

第 二 部 分 是 边框 (border) ， 边 框 可 以 有 不 同 的 样式 。 

第 三 部 分 是 填充 (padding) ， 填 充 用 来 定义 内 容 区 域 与 边框 (border) 之 间 的 空白 。 

第 四 部 分 是 内 容 区 域 。 

填充 、 边 框 和 边界 都 分 为 “上 、 右 、 
下 、 左 ”4 个 方向 ， 既 可 以 分 别 定义 ， 也 可 
以 统一 定义 。 当 使 用 CSS 定 义 盒子 的 width 和 
height 时 ， 定 义 的 并 不 是 内 容 区 域 、 填 充 、 
边框 和 边界 所 占 的 总 区 域 。 实 际 上 定义 的 是 
内 容 区 域 content 的 width 和 height。 为 了 计算 
盒子 所 占 的 实际 区 域 ， 必 须 加 上 padding、 


border 和 margin 。 


margin-top 


border-top 


Wal-useo 
jjoLuopuoq 
180 


margin-bottom : 


width 

一 国 1 1 金子 模型 图 
实际 宽度 = 左边 界 + 左边 框 + 左 填 充 + 内 容 宽度 (width) + 右 填 充 + 右 边框 + 右边 界 
实际 高 度 = 上 边界 + 上 边框 + 上 填充 + 内 容 高 度 (height) + 下 填充 + 下 边框 + 下 边界 


盒子 模型 的 margin 和 padding 属 性 比较 简单 ， 只 能 设置 宽度 
值 ， 最 多 hy 右 、 下 、 左 设置 宽度 值 。 而 边框 border 则 可 以 设置 宽度 、 颜 色 和 样式 。 
border 是 CSS 的 一 个 属性 ， 用 它 可 以 给 HTML 


标记 《如 td、Div 等 ) 添加 边框 ， 它 可 以 定 。 Pe 
义 边框 的 样式 style) 、 宽 度 (width) 和 颜色 | 名 se 
(color) ， 利 用 这 3 个 属性 相互 配合 ， 能 设计 出 很 | 和 To RE 的 Eee 
好 的 效果 。 I 

在 Dreamweaver 中 可 以 使 用 可 视 化 操作 设 naw: ET EE Nw 
置 边框 效果 ， 在 “CSS 样 式 规则 定义 ”对 话 框 
中 的 “分 类 ”列表 中 选择 “边框 ”选项 ， 如 图 
13-2 所 示 。 [ET CD CD CERR 


图 13-2 在 Dreamweaver 中 设置 边框 
222 


@ 一 o 
课堂 小 实例 一 一 边框 样式 (border-style) 一 一 一 一 一 


上 嘲 13.2.1 


第 13 课 ESSEEZEEEE 同 


样式 是 边框 最 重要 的 一 个 方面 ， 样 式 不 仅 控 制 着 边框 的 显示 ， 而 且 如 果 没 有 样式 ， 将 根 
本 没有 边框 。border-style 定 义 元 素 的 4 个 边框 样式 。 如 果 border-style 设 置 全 部 4 个 参数 值 ， 将 按 
上 、 右 、 下 、 左 的 顺序 作用 于 4 个 边框 。 如 果 只 设置 一 个 ， 将 用 于 全 部 的 4 条 边 。 


基本 语法 : 


语法 说 明 : : 

ee 
无 、 虚 线 、 实 现 、 双 实 线 等 。borderstyle 的 取 | 
值 如 表 13-1 所 示 。 | 


表 13-1 边框 样式 的 取 值 和 含义 


3D 凸 模 
使 整个 边框 凹陷 
outset 使 整个 边框 凸 起 
可 以 为 一 个 边框 定义 多 个 样式 ， 例 如 : 


上 面 这 条 规则 为 类 名 为 ad 的 段落 定义 了 4 | 


种 边框 样式 : 实 线 上 边框 、 点 线 右 边框 、 虚 


线 下 边框 和 一 个 双 线 左边 框 。 这 里 的 值 采 用 | 


了 top-right-bottom-left 的 顺序 。 


也 可 以 使 用 下 面 的 单 边 边框 样式 属性 设 | 


| 


下 面 通 过 实例 讲述 border-style 的 使 用 ， 其 
代码 如 下 所 示 。 
实例 代码 : 
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YE 课堂 实录 


在 浏览 器 中 浏览 ， 不 同 的 边框 样式 效果 如 图 
13-3 所 示 。 


i 


a 


图 13-3 边框 样式 
仆 13.2.2 属性 值 的 简写 形式 
还 可 以 使 用 border-top-style、border-right-style、border-bottom-style 和 border-left-style 分 别 设 
置 上 边框 、 右 边框 、 下 边框 和 左边 框 的 不 同样 式 ， 其 CSS 代 码 如 下 。 
实例 代码 : 


在 浏览 器 中 浏览 ， 可 以 看 出 分 别 设置 了 上 、 
下 、 左 、 右 边框 为 不 同 的 样式 ， 效 果 如 图 13-4 
所 显示 。 


eerie SI 和 二 这 杜 


图 13-4 设置 上 、 下 、 左 、 访 边框 为 不 同 的 样式 
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@-e 第 13 课 

由 13.2.3 ”课堂 小 实例 一 边框 与 背景 一 一 一 一 一 一 一 一 一 0 
设置 边框 颜色 非常 简单 。CSS 使 用 一 个 ; 
简单 的 border-color 属 性 ， 它 一 次 可 以 接受 最 ; 
多 4 个 颜色 值 。 可 以 使 用 任何 类 型 的 颜色 值 ， | 
例如 可 以 是 命名 颜色 ， 也 可 以 是 十 六 进 制 和 | 
RGB 值 。 : 
基本 语法 : 


语法 说 明 : 


border-top-color、border-right-color、 ; 
border-bottom-color 和 border-left-color 属 性 分 别 | 
用 来 设置 上 、 右 、 下 、 左 边框 的 颜色 ， 也 可 | 
以 使 用 border-color 属 性 来 统一 设置 4 个 边框 的 | 
颜色 。 | 
如 果 border-color 设 置 全 部 4 个 参数 值 ， 将 ; 
按 上 、 右 、 下 、 左 的 顺序 作用 于 4 个 边框 。 如 ; 
只 设置 一 个 ， 将 用 于 全 部 的 4 条 边 。 如 果 设 | 
置 2 个 值 ， 第 一 个 用 于 上 、 下 ， 第 二 个 用 于 | 
左 、 右 。 如 果 提供 3 个 ， 第 一 个 用 于 上 ， 第 二 ; 
个 用 于 左 、 右 ， 第 三 个 用 于 下 。 | 
下 面 通过 实例 讲述 border-color 属 性 的 使 : 

用 ， 其 CSS 代 码 如 下 。 : 
实例 代码 : 


| 在 浏览 器 中 浏览 ， 可 以 看 到 ， 使 用 border- 
; eolor 设 置 了 不 同 颜色 的 边框 ， 如 图 13-5 所 示 。 


T FE 
! 
| | 8: Ri 看 -eraerreeler” 三 析 看 不 到 效果 ,须要 先 设 加“bexder-strle” 后 性 、 
! 


图 13-5 ”border-color 实 例 效果 
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和 | 课堂 实录 ~“e® 


| 3 3 课堂 小 实例 一 一 设置 内 边 距 
@ (Padding) 


Padding 属 性 设置 元 素 所 有 内 边 距 的 宽度 ， 或 者 设置 各 边 上 内 边 距 的 宽度 。 
基本 语法 : 


语法 说 明 : 


padding 是 padding-top、padding-right、 ; 
padding-bottom、padding-left 的 一 种 快捷 的 综 | 
合 写法 ， 最 多 允许 4 个 值 ， 依 次 的 顺序 是 : : 
es | 在 浏览 中 浏览 ， 可 以 看 到 ,使 用 
在 Dreamweaver 中 可 以 使 用 可 视 化 操作 没 : “padding:50px” 设 置 了 上 、 下 、 左 、 右 填充 
置 填充 的 效果 ， 在 “CSS 样 式 规则 定义 ”对 | 宽度 都 为 0px， 效 果 如 图 13-7 所 示 。 
话 框 中 的 “分 类 ”列表 中 选择 “ 方 框 ”选项 ， | 
然后 在 “padding” 选 项 中 设置 填充 属性 ， 如 图 ; 
13-6 所 示 。 | 
Pp 的 C55 规则 定义 El) | 


方 要 


WidthM) 和 vie 了 ou) - 
Height O00) ; = 区 了 aeec - 
Plime Nein 
团 全 部 相同 S) 辆 全 部 相同 0 
Top :本 wD: -EE 
Neht) : 0 ~ 了 | Bight :| =] 匠 
Bottem B) ; 50 ” Bottom M) : -| <| 


Left : Fo -=e | Le: "| = 


EE 


Er 


图 13.7 上 下 左右 填充 究 度 相同 
i | | 下 面 讲述 上 下 左右 填充 宽度 各 不 相同 的 
| 实例 ， 其 代码 如 下 所 示 。 

实例 代码 : 


图 13-6 设置 填充 属性 
下 面 讲述 上 下 左右 填充 宽度 相同 的 实 | 
例 ， 其 代码 如 下 所 示 。 : 
实例 代码 : 
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@ oo 


米 ， 左 填充 为 ?厘米 ， 在 浏览 器 中 浏览 效果 ， 
如 图 13-8 所 示 。 


和 
人 


oma RE 过 -CX 
Er 


1 


人 Tes 入- 上 乓 于 为 4 3 理 示 ,二 为 1 大 T 霄 充 为 4 蛙 玉 ， 去 清 到 为 


在 浏览 器 中 浏览 ， 可 以 看 到 ,使 用 
“padding: 0.5cm lcm 4cm 2cm” 分 别 设置 了 上 
填充 为 0.5 厘 米 ， 右 填充 为 1 厘米 ， 下 填充 为 4 厘 


课堂 小 实例 一 一 设置 外 边 距 


(margin ) 

设置 外 边 距 最 简单 的 方法 就 是 使 用 margin : Cos MAE 区 呈 | 
属性 ， 这 个 属性 接受 任何 长 度 单位 、 百 分 数 | ee i 
值 甚至 负 值 。 外 边 距 属 性 是 用 来 设置 页 面 中 iow: 7 a 
一 个 元 素 所 占 空间 的 边缘 到 相 邻 元 素 之 间 的 | 
距离 。margin 属 性 包括 margin-top 、margin- ; Le 3 | wee E 
right、margin-bottom、margin-left、margin。 : uao :[ 全 习 | vam :TT 

基本 语法 : | 

| 到 幼 00 | ERE ER | 


图 13-9 设置 边界 属性 
| ”下面 举 一 个 上 下 左右 边界 宽度 都 相同 的 
| 实例 ， 其 代码 如 下 。 
| 实例 代码 : 


语法 说 明 : 


取 值 范围 包括 如 下 各 项 。 | 
太 ”长度 值 相当 于 设置 顶端 的 绝对 边 距 值 , 包 ; 
括 数字 和 单位 。 : 
太 ”百分比 是 设置 相对 于 上 级 元 素 的 宽度 的 百 | 
分 比 ， 人 允许 使 用 负 值 。 | 
太 ”auto 是 自动 取 边 距 值 ， 即 元 素 的 默认 值 。 
在 Dreamweaver 中 可 以 使 用 可 视 化 操作 设置 ; 
边界 的 效果 ， 在 “CSS 样 式 规则 定义 ”对 话 框 中 | 
的 “分 类 ”列表 中 选择 “ 方 框 ” 选项， 然后 在 ; 
margin 选 项 中 设置 边界 属性 ， 如 图 13-9 所 示 。 
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在 浏览 器 中 浏览 效果 ， 如 图 13-10 所 示 。 


图 13-10 边界 宽度 相同 


上 面 两 个 div 没 有 设置 边界 属性 | 


(margin) ， 仅 设置 了 边框 属性 (border) 。 
外 面 那个 为 d1 的 div 的 border 属 性 设 为 红色 ， 
里 面 那个 为 d2 的 div 的 border 属 性 设 为 灰色 。 


和 上 面 两 个 div 的 CSS 属 性 设置 唯一 不 同 | 
的 是 ， 下 面 两 个 div 中 ， 里 面 的 那个 为 43 的 div 


Se | 


~“e® 


在 浏览 器 中 浏览 效果 ， 如 图 13-11 所 示 。 


TS 


Dx 
| Bonnanres Te 


| Smn WED SV CR TAT wend Es | 


RE 一 二 


ET 


设置 了 边界 属性 margin) ， 为 1 厘米， 表示 | 


这 个 div 上 下 左右 的 边 距 都 为 1 厘米 。 


下 面 举 一 个 上 下 左右 边界 宽度 各 不 相同 ， 


的 实例 ， 其 代码 如 下 。 
实例 代码 : 


Er 


图 13-11 边界 宽度 各 不 相同 
上 面 两 个 div 没 有 设置 边 距 属性 
(margin) ， 仅 设置 了 边框 属性 (border) 。 
| 外面 那个 div 的 border 设 为 红色 ， 里 面 那个 div 
| 的 border 属 性 设 为 灰色 。 


和 上 面 两 个 div 的 CSS 属 性 设置 不 同 的 是 ， 下 面 两 个 div 中 ， 里 面 的 那个 div 设 置 了 边 距 属性 
(margin) ， 设 定 上 边 距 为 0.Scm， 右 边 距 为 cm， 下 边 距 为 2.Scm， 左 边 距 为 1.Scm。 


13.5 


盒子 的 定位 


CSS 为 定位 和 浮动 提供 了 一 些 属性 ， 利 用 这 些 属 性 ， 可 以 建 
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立 列 式 布局 ， 将 布局 的 一 部 分 与 男 一 部 分 重 二 ， 还 可 以 完成 多 年 来 通常 需要 使 用 多 个 表格 才能 
完成 的 任务 。 定 位 的 基本 思想 很 简单 ， 它 允许 你 定义 元 素 框 相对 于 其 正常 位 置 应 该 出 现 的 位 
置 ， 或 者 相对 于 父 元 素 、 另 一 个 元 素 甚 至 浏览 器 窗口 本 身 的 位 置 。 显 然 ， 这 个 功能 非常 强大 ， 


也 很 让 人 吃惊 。 
nn 


在 用 CSS 控 制 排版 过 程 中 ， 定 位 一 直 被 人 认为 是 一 个 难点 ， 这 主要 是 表现 为 很 多 由 友 在 没有 深入 理解 上 
清楚 定位 的 原理 时 ， 排 出 来 的 杂乱 网 页 常 让 他 们 不 知 所 措 ， 而 另 一 边 一 些 高 手 则 常常 借助 定位 的 强大 功能 ' 
做 出 些 很 酷 的 效果 来 。 因 此 自己 杂乱 的 网 页 与 高 手 完美 的 设计 形成 鲜明 对 比 ， 这 在 一 定 程度 上 打击 了 初学 I 
定位 的 网 友 ， 项 望 下 面 的 教程 能 让 你 更 深入 地 了 解 CSS 定 位 属性 。 


虽 13.5.1 静态 定位 (static) 


static， 无 特殊 定位 ， 它 是 html 元 素 默 认 的 定位 方式 ， 即 我 们 不 设 定 元 素 的 position 属 性 时 
默认 的 position 值 就 是 static， 它 遵循 正常 的 文档 流 对 象 ， 对 象 占 用 文档 空间 ， 该 定位 方式 下 ， 
top 、right、bottom、left、z-index 等 属性 是 无 效 的 。 

position 的 原意 为 位 置 、 状 态 、 安 置 。 在 CSS 布 局 中 ，position 属 性 非常 重要 ， 很 多 特殊 
容器 的 定位 必须 用 position 来 完成 。position 属 性 有 4 个 值 ， 分 别 是 : static、absolute、fixed、 
relative，static 是 默认 值 ， 代 表 无 定位 。 

定位 〈position) 允许 用 户 精 确定 义 元 素 框 出 现 的 相对 位 置 ， 可 以 相对 于 它 通常 出 现 的 位 
置 ， 相 对 于 其 上 级 元 素 ， 相 对 于 另 一 个 元 素 ， 或 者 相对 于 浏览 器 视窗 本 身 。 每 个 显示 元 素 都 可 
以 用 定位 的 方法 来 描述 ， 而 其 位 置 由 此 元 素 的 包含 块 来 决定 。 

基本 语法 : 
margin-right: 右边 Position: static | absolute | fixed | relative 

语法 说 明 : 

六 Static: 静态 (默认) ， 无 定位 。 
友 ”Relative: 相对 ， 对 象 不 可 层 芭 ， 但 将 依据 left、right、top、bottom 等 属性 在 正常 文档 流 中 

偏 移 位 置 。 

六 Absolute: 绝对 ， 将 对 象 从 文档 流 中 拖 出 ， 通 过 width、height、left、right、top 、bottom 等 
属性 与 margin、padding、border 进 行 绝对 定位 ， 绝 对 定位 的 元 素 可 以 有 边界 ， 但 这 些 边界 

不 压缩 。 而 其 层 翅 通过 z-index 属性 定义 。 

太 Fixed: 固定 ， 使 元 素 固定 在 屏幕 的 某 个 位 置 ， 其 包含 块 是 可 视 区 域 本 身 ， 因 此 它 不 随 滚动 

条 的 滚动 而 滚动 。 

从 13.5.2 课堂 小 实例 一 -相对 定位 (relative) 

相对 定位 是 一 个 非常 容易 掌握 的 概念 。 如 果 对 一 个 元 素 进行 相对 定位 ， 它 将 出 现在 它 所 在 
的 位 置 上 。 然 后 ， 可 以 通过 设置 垂直 或 水 平 位 置 ， 让 这 个 元 素 “ 相 对 于 ” 它 的 起 点 进行 移动 。 
如 果 将 top 设 置 为 20px， 那 么 框 将 在 原 位 置顶 部 下 面 20 像 素 的 地 方 。 如 果 left 设 置 为 30 像素 ， 那 
么 会 在 元 素 左 边 创建 30 像 素 的 空间 ， 也 就 是 将 元 素 向 右 移动 。 

当 容器 的 position 属 性 值 为 relative 时 ， 这 个 容器 即 被 相对 定位 了 。 相 对 定位 和 其 他 定位 相 
似 ， 也 是 独立 出 来 浮 在 上 面 。 不 过 相对 定位 的 容器 的 top 顶部) 、bottom (底部) 、left ( 左 
边 ) 和 right (右边 ) 属 性 参照 对 象 是 其 父 容器 的 4 条 边 ， 而 不 是 浏览 器 窗口 。 

下 面 举例 讲述 相对 定位 的 使 用 ， 其 代码 如 下 所 示 。 
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HTML+CSS 网 页 设计 与 布 


这 里 给 外 部 div 设 置 了 #ecc 背 景色 ， 并 给 内 部 无 定位 的 div 设 置 了 #eee 背 景色 ， 而 相对 定位 的 div 


容器 设置 了 #9c9 背 景色 ， 并 设置 了 inset 类 型 的 边框 。 在 浏览 器 中 浏览 效果 ， 如 图 13-12 所 示 。 


图 13-12 相对 定位 方式 效果 
相对 定位 的 容器 其 实 并 未 完全 独立 ， 浮 动 范围 仍然 在 父 容器 内 ， 并 且 其 所 占 的 空白 位 置 仍 
然 有 效 地 存在 于 前 后 两 个 容器 之 间 。 
肯 13.5.3 课堂 小 实例 一 一 绝对 定位 (absolute)〉 一 一 一 一 一 一 一 o 
当 容 器 的 position 属 性 值 为 absolute 时 ， 这 个 容器 即 被 绝对 定位 了 。 绝 对 定位 在 几 种 定位 方 
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法 中 使 用 最 广泛 ， 这 种 方法 能 精确 地 将 元 素 移动 到 想 要 的 位 置 。absolute 用 于 将 一 个 元 素 放 到 
固定 的 位 置 非常 方便 。 

当 有 多 个 绝对 定位 容器 放 在 同一 个 位 置 时 ， 显 示 哪 个 容器 的 内 容 呢 ? 类 似 于 Photoshop 的 图 

层 有 上 下 关系 ， 绝 对 定位 的 容器 也 有 上 下 的 关系 ， 在 同一 个 位 置 只 会 显示 最 上 面 的 容器 。 在 计 

算 机 显示 中 把 垂直 于 显示 屏幕 平面 的 方向 称 为 z 方 向 ，CSS 绝 对 定位 的 容器 的 z-index 属性 对 应 这 

个 方向 ，z-index 属 性 的 值 越 大 ， 容 器 越 靠 上 。 即 同一 个 位 置 上 的 两 个 绝对 定位 的 容器 只 会 显示 
2 必 性 值 较 大 的 。 


top、bottom、left 和 right 这 4 个 CSS 属 性 ， 它 们 部 是 配合 position 属 性 使 用 的 ， 表 示 的 是 块 的 各 个 边界 距 
页 面 边 框 的 距离 ， 或 各 个 边界 离 原来 位 置 的 只 有 当 position 设 置 为 absolute 或 relative 时 才能 生效 


下 面 举例 讲述 CSS 绝 对 定位 的 使 用 ， 其 代码 如 下 所 示 。 


这 里 设置 了 5 个 绝对 定位 的 Div，3 个 无 定 

的 Div。 给 外 部 div 设 置 了 #eee 背 景色 ， 并 给 

i 内 部 无 定位 的 div 设 置 了 #ccc 背 景色 ， 而 绝对 
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定位 的 div 容 器 设置 了 #9c9 和 #9cc 背 景色 并 ; 10， 第 5 个 绝对 定位 的 容器 的 z-index 值 为 9， 
设置 了 double 类 型 的 边框 。 在 浏览 器 中 浏览 | 所 以 第 4 个 绝对 定位 的 容器 显示 在 第 5 个 绝对 
果 ， 如 图 13- a | 定位 的 容器 的 上 方 。 


图 13-13 ”绝对 定位 效果 

从 本 例 可 以 看 到 ， 设 置 top、bottom、left 
和 right 其 中 至 少 一 种 属性 后 ，5 个 绝对 定位 的 
div 容 器 彻底 摆脱 了 其 父 容器 (id 名 称 为 all) 
的 束缚 ， 独 立地 漂浮 在 上 面 。 而 在 未 设置 
z-index 属 性 值 时 ， 第 2 个 绝对 定位 的 容器 显示 ; 
在 第 1 个 绝对 定位 的 容器 上 方 ( 即 后 面 的 容器 ; 
z-index 属性 值 较 大 ) 。 相 应 地 ， 第 5 个 绝对 定 | 
位 的 容器 虽然 在 第 4 个 绝对 定位 的 容器 后 面 ， 
但 由 于 第 4 个 绝对 定位 的 容器 的 z-index 值 为 


人 13.5.4 ”课堂 小 实例 一 一 固定 定位 fixed) 
当 容 器 的 position 属 性 值 为 fixed 时 ， 这 个 容器 即 被 固定 定位 了 。 固 定 定位 和 绝对 定位 非常 类 

似 ， 不 过 被 定位 的 容器 不 会 随 着 滚动 条 的 拖 动 而 变化 位 置 。 在 视野 中 ， 固 定 定位 的 容器 的 位 置 

是 不 会 改变 的 。 

下 面 举例 讲述 固定 定位 的 使 用 ， 其 代码 如 下 所 示 。 
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在 本 例 中 给 外 部 div 设 置 了 #cccccc 背 景色 ， 并 给 内 部 无 定位 的 div 设 置 了 #eeeeee 背 景色 ,而 
固定 定位 的 div 容 器 设置 了 #9c9000 背 景色 ， 并 设置 了 outset 类 型 的 边框 。 在 浏览 器 中 浏览 效果 ， 
如 图 13-14 和 图 13-15 所 示 。 


图 13-14 固定 定位 效果 图 13-15 拖 动 浏览 器 后 效果 
可 以 尝试 拖 动 浏览 器 的 垂直 滚动 条 ， 固 定 容 器 不 会 有 任何 位 置 改变 。 不 过 IE 6.0 版 本 的 浏 
览 器 不 支持 fixed 值 的 position 属 性 ， 所 以 网 上 类 似 的 效果 都 是 采用 JavaScript 脚 本 编程 完成 的 。 


@ 


应 用 Web 标 准 创建 网 页 以 后 ，float 浮 动 属性 是 元 素 定位 中 非 
常 重要 的 属性 ， 常 常 通 过 对 div 元 素 应 用 float 浮 动 来 进行 定位 ， 不 但 对 整个 版 式 进行 规划 ， 也 可 
以 对 一 些 基本 元 素 如 导航 等 进行 排列 。 


且 13.6.1 准备 代码 
在 标准 流 中 ， 一 个 块 级 元 素 在 水 平方 向 会 自动 伸展 ， 直 到 包含 它 的 元 素 的 边界 ， 而 在 竖 直 
方向 和 其 他 元 素 依次 排列 ， 不 能 并 排 。 使 用 浮动 方式 后 ， 块 级 元 素 的 表现 会 有 所 不 同 。 
基本 语法 : 
语法 说 明 
none 是 默认 值 ， 表 示 对 象 不 浮动 ，left 表 示 对 象 浮 在 左边 ，right 表 示 对 象 浮 在 右边 。 
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CSS 人 允许 任何 元 素 浮动 float， 不 论 是 图 | 
像 、 段 落 还 是 列表 。 无 论 先前 元 素 是 什么 状 | 
态 ， 浮 动 后 都 成 为 块 级 元 素 。 浮 动 元 素 的 宽 | 
度 默 认为 auto。 | 


国 13.6.2 案例 一 -设置 第 1 个 浮动 的 div 一 一 一 一 一 一 一 一 
float 属 性 不 是 所 想象 的 那么 简单 ， 不 是 通过 这 一 篇 文字 的 说 明 ， 就 能 让 用 户 完全 搞 明白 它 的 
工作 原理 的 ， 需 要 在 实践 中 不 断 地 总 结 经 验 。 下 面 通过 几 个 小 例子 ， 来 说 明 它 的 基本 工作 情况 。 
如 果 float 取 值 为 none 或 没有 设置 float 时 ， 不 会 发 生 任何 浮动 ， 块 元 素 独占 一 行 ， 紧 随 其 后 
的 块 元 素 将 在 新 行 中 显示 。 其 代码 如 下 所 示 ， 在 浏览 器 中 浏览 ， 效 果 如 图 13-16 所 示 ， 可 以 看 
到 由 于 没有 设置 Div 的 float 属 性 ， 因 此 每 个 Div 都 单独 占 一 行 ， 两 个 Div 分 两 行 显示 。 


下 面 修 改 一 下 代码 ， 使 用 float:left 对 content_a 应 用 向 左 的 浮动 ， 而 content_b 不 应 用 任何 浮 
动 。 其 代码 如 下 所 示 ， 在 浏览 器 中 浏览 ， 效 果 如 图 13-17 所 示 。 


Ti 


3 加 加 ovmwucsmrarsssasxawscuat5 因 P- cx] 门 关中 
全 一 人 设 村 为 皇 汉 动 ,一 个 不 -> 


这 是 第 二 个 DIY 不 应 用 泽 动 


100% 


图 13-16 没有 设置 float 图 13-17 一 个 设置 为 左 肖 动 ， 一 个 不 设置 浮动 
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下 面 修改 一 下 代码 ， 同 时 对 这 两 个 容器 应 用 向 左 的 浮动 ， 其 CSS 代 码 如 下 所 示 。 在 浏览 器 
中 浏览 ， 可 以 看 到 效果 如 图 13-18 所 示 ， 两 个 Div 占 一 行 ， 在 一 行 上 并 列 显 示 。 


下 面 修改 上 面 代码 中 的 两 个 元 素 ， 同 时 应 用 向 右 的 浮动 ， 其 CSS 代 码 下 所 示 ， 在 浏览 器 中 
浏览 ， 效 果 如 图 13-19 所 示 ， 可 以 看 到 同时 对 两 个 元 素 应 用 向 右 的 浮动 基本 保持 了 一 致 ， 但 请 
注意 方向 性 ， 第 二 个 在 左边 ， 第 一 个 在 右边 。 


和 课堂 实录 


课 后 练 : 
RE 最 外 面 的 是 ， 第 二 部 分 是 
， 第 三 部 分 是 ， 第 四 部 分 是 
(2) 属性 设置 元 素 所 有 内 边 距 的 宽度 ， 或 者 设置 名 边 上 内 边 距 
的 宽度 。 
(3) 当 容器 的 position 属 性 值 为 时 ， 这 个 容器 即 被 固定 定位 了 。 


13. 


盒子 模型 是 CSS 的 基石 之 一 ， 它 指定 元 素 如 何 显示 及 如 何 相 
互 交互 。 页 面 上 的 每 个 元 素 都 被 浏览 器 看 成 是 一 个 矩形 的 盒子 ， 这 个 盒子 由 元 素 的 内 容 、 填 
充 、 边 框 和 边界 组 成 。 网 页 就 是 由 许多 个 盒子 通过 不 同 的 排列 方式 堆积 而 成 。 盒 子 模型 是 CSS 
控制 页 面 时 一 个 很 重要 的 概念 ， 只 有 很 好 地 掌握 了 盒子 模型 ， 以 及 其 中 每 个 元 素 的 用 法 ， 才 能 
真正 控制 好 页 面 中 的 各 个 元 素 。 
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CSS+DIV 布 局 方法 


本 课 导读 

设计 网 页 的 第 一 步 是 设计 布局 ， 好 的 网 页 布局 会 
令 访问 者 耳目 一 新 ， 同 样 也 可 以 使 访问 者 比较 容易 在 站 
点 上 找到 他 们 所 需要 的 信息 。 无 论 使 用 表格 还 是 CSS， 
网 页 布局 都 是 把 大 块 的 内 容 放 进 网 页 的 不 同 区 域 里 面 。 
有 了 CSS， 最 常用 来 布局 内 容 的 元 素 就 是 <div> 标 签 。 
盒子 模型 是 CSS 控 制 页 面 时 一 个 很 重要 的 概念 ， 只 有 很 
好 地 掌握 了 盒子 模型 ， 以 及 其 中 每 个 元 素 的 用 法 ， 才 能 
真正 控制 好 页 面 中 的 各 个 元 素 。 


技术 要 点 

友 ”CSS 布局 模型 
六 ”CSS 布局 理念 
六 ”常见 的 布局 类 型 


ET 课堂 实录 “ee 一 全 


常用 的 CSS 布 局 模型 有 Flow Model (流动 模型 ) 、Float 


Model (浮动 模型 ) 和 Layer Model 〈 层 模型 ) 。 这 3 类 布局 模型 与 盒子 模型 一 样 是 CSS 的 核心 概 
念 ， 了 解 和 掌握 这 些 基本 概念 对 网 页 布局 有 着 举足轻重 的 作用 ， 所 有 CSS 布 局 技术 都 是 立 在 盒 
子 模型 、 流 动 模型 、 浮 动 模型 和 层 模 型 这 4 个 最 基本 的 概念 之 上 的 。 


轩 14.1.1 关于 CSS 布 局 


掌握 基于 CSS 的 网 页 布局 方式 ， 是 实现 Web 标 准 的 基础 。 在 主页 制作 时 采用 CSS 技 术 ， 可 


以 有 效 地 对 页 面 的 布局 、 字 体 、 颜 色 、 背 景 和 其 他 效果 实现 更 加 精确 的 控制 。 只 要 对 相应 的 代 
码 做 一 些 简单 的 修改 ， 大 四 全 和 利生 采用 CSS 布 局 有 以 下 优点 。 
太 ”大 大 缩减 页 面 代码 ， 提 高 页 面 浏览 速度 ， 缩 减 带宽 成 本 。 


对 对 对 对 对 


结构 清晰 ， 容易 被 搜索 引擎 搜索 到 。 
缩短 改版 时 间 ， 只 要 简单 地 修改 几 个 CSS 文 件 就 可 以 重新 设计 一 个 有 成 百 上 千 页 面 的 站 点 。 
强大 的 字体 控制 和 排版 能 力 。 

CSS 非 常 容 易 编写 ， 可 以 像 写 HIML 代 码 一 样 轻松 地 编写 CSS 。 
提高 易 用 性 ， 使 用 CSS 可 以 结构 化 HIML， 如 <p> 标 记 只 用 来 控制 段落 ，<heading> 标 记 只 
用 来 控制 标题 ，<table> 标 记 只 用 来 表现 格式 化 的 数据 等 。 
表现 和 内 容 相 分 离 ， 将 设计 部 分 分 离 出 来 放 在 一 个 独立 样式 文件 中 。 
更 方便 搜索 引擎 的 搜索 ， 用 只 包含 结构 化 内 容 的 HIML 代 蔡 底 套 的 标记 ， 搜 索引 擎 将 更 有 
效 地 搜索 到 内 容 。 
able 的 布局 中 ， 垃 圾 代码 会 很 多 ， 一 些 修饰 的 样式 及 布局 的 代码 混合 在 一 起 ， 很 不 直观 。 
而 div 更 能 体现 样式 和 结构 相 分 离 ， 结 构 的 重 构 性 强 。 
可 以 将 许多 网 页 的 风格 格式 同时 更 新 。 不 用 再 一 页 一 页 地 更 新 了 。 可 以 将 站 点 上 所 有 的 网 
页 风格 都 使 用 一 个 CSS 文 件 进 行 控 制 ， 只 要 修改 这 个 CSS 文 件 中 相应 的 行 ， 那 么 整个 站 点 
的 所 有 页 面 都 会 随 之 发 生变 动 。 


侦 14.1.2 ”流动 布局 模型 


流动 模型 (Flow Model) 是 HTML 中 默认 的 网 页 布局 模式 ， 在 一 般 状 态 下 ， 网 页 中 元 素 的 


布局 都 是 以 流动 模型 为 默认 的 显示 方式 。 这 里 的 一 般 状态 ， 是 指 任 何 元 素 在 没有 定义 拖 出 文档 
流 定 位 方式 属性 (position: absolute: 或 position:fixed:) 、 没 有 定义 浮动 于 左右 的 属性 (float: left: 
或 float:right;〉 时 ， 这 些 元 素 都 将 具有 流动 模型 的 布局 模式 。 


流动 模型 的 含义 来 源 于 水 的 流动 原理 ， 一 般 也 称 之 为 文档 流 。 在 网 页 内 容 的 显示 中 ， 元 素 


自 上 而 下 按 顺序 显示 ， 要 改变 其 在 网 页 中 的 位 置 ， 只 能 通过 修改 网 页 结构 中 元 素 的 先后 排列 顺 
序 和 分 布 位 置 来 实现 。 同 时 流动 模型 中 每 个 元 素 都 不 是 一 成 不 变 的 : 当 在 一 个 元 素 前 面 插入 一 
个 新 的 元 素 时 ， 这 个 元 素 本 身 及 其 后 面 的 元 素 的 位 置 会 自然 向 后 流动 推移 。 


当 元 素 定义 为 相对 定位 ， 即 设置 position:relative; 属 性 时 ， 它 也 会 遵循 流动 模型 布局 规则 ， 


跟随 HTML 文 档 流 自 上 而 下 流动 。 
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下 面 是 一 个 流动 布局 模型 实例 ， 其 CSS 布 局 代码 如 下 。 


<style type="text/css"> 


人 


i ”上 面 的 例子 仅 定 义 了 段落 元 素 以 相对 定 
1 定义 坐标 值 ， 又 会 出 现 
; 什么 情况 呢 ? 这 时 ， 用 户 会 发 现 相对 定位 元 
| 素 偏离 原 位 置 ， 不 再 按 元 素 先后 顺序 显示 ， 
| 但 它 依然 遵循 流动 模型 规则 ， 始 终 保持 与 原 
; 点 相同 的 位 置 关系 一 起 随 文档 流 整体 移动 。 

| ”下面 是 一 个 实例 ， 其 CSS 布局 代码 如 下 
| 所 示 。 


下 面 是 其 XHTML 结构 代码 : 


， 。 当 为 相对 定位 的 元 素 定义 了 坐标 值 以 
上 旅人 和 全 |、 (人 TE 
当 浊 定义 p 了 元 素 以 人 对 定位 示 | 名 已 会 以 原 位 置 的 左上 上 角 为 参考 点 进行 信 
| 移 ， 其 中 坐标 原点 为 新 移动 位 置 的 元 素 左上 
时 ， 它 人 在 中 刘 条， 如 国 142 所 让 
启动 人 /二 全 一 个 二 二 于 入 入。 在 | 一 
浏览 器 中 浏览 效果 ， 如 图 14-1 所 示 。 


Om 
ELE 


表格 行 ， 单 元 格 表格 行 ， 单 元 格 
且 著 


“ 列表 项 
表 恪 行 ， 单 元 格 表格 行 ， 单 元 格 


二 100% ~ 


图 14-1 流动 布局 


alo% ~ | 


图 14-2 流动 布局 模型 相对 定位 偏 移 
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所 谓 的 相对 ， 仅 指 元 素 本 身 位 置 ， 对 其 他 元 素 的 位 置 不 会 产生 任何 影响 。 因 此 ， 采 用 相对 
定位 的 元 素 被 定义 偏 移 位 置 后 ， 不 会 挤占 其 他 流动 元 素 的 位 置 ， 但 能 够 覆盖 其 他 元 素 。 


且 14.1.3 浮动 布局 模型 

浮动 模型 (Float Model) 是 完全 不 同 于 流动 模型 的 另 一 种 布局 模型 ， 它 遵循 浮动 规则 ， 但 
是 仍然 受 流动 模型 带 来 的 潜在 影响 。 任 何 元 素 在 默认 状态 下 是 不 浮动 的 ， 但 都 可 以 通过 CSS 定 
义 为 浮动 。 浮 动 模型 吸取 了 流动 模型 和 层 模型 的 优点 ， 以 尽 可 能 实现 网 页 的 自 适应 能 力 。 

当 元 素 定义 为 “float:left; 或 loatright ”浮动 时 ， 元 素 即 成 为 了 浮动 元 素 ， 浮 动 元 素 具 有 一 
些 块 状元 素 的 特征 ， 但 若 没有 给 其 定义 宽度 时 ， 其 宽度 则 为 元 素 中 内 联 元 素 的 宽度 。 

浮动 本 身 起 源 于 实现 图 文 环绕 混 排 的 目的 ， 下 面 是 常见 的 图 文 混 排 网 页 实例 。 


这 是 一 个 图 文 混 排 的 例子 ， 这 里 定义 为 图 片 定义 了 “float:left;” 的 属性 ， 图 片 就 在 整 段 文 
字 的 左 侧 显示 。 
同时 ， 文 字 依据 XHTML 文 档 流 的 规则 ， 自 动 自 上 而 下 、 从 左 至 右 地 进行 流动 。 随 着 文字 
的 增多 ， 当 文字 的 排列 超出 了 图 片 的 高 度 时 ， 文 字 的 排列 就 会 环绕 图 片 底部 ， 形 成 了 图 文 环绕 
混 排 的 效果 ， 这 就 是 Float (浮动 ) 的 效果 了 ， 如 图 14-3 所 示 。 
从 这 个 效果 中 可 以 看 出 ， 浮 动 元 素 的 定位 还 是 基于 正常 的 文档 流 ， 然 后 从 文档 流 中 抽出 ， 
并 尽 可 能 远 地 移 动 至 左 侧 或 者 右 侧 ， 文 字 内 容 会 围绕 在 浮动 元 素 周围 。 
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I GE] ` 国 | es : 属性 取 值 包括 以 下 4 个 。 
在 以 提高 宇 业 宫 销 为 旧 的 基础 之 上 诺 行 个 性 履 的 定制 服务 ,将 袖 世 辣 铺 、 品 牌 忧 措 、 互动 多 验 ， | 太 elte 清除 左边 的 浮动 对 象 ， 如 果 左 边 存 
CT i | 在 浮动 对 象 ， 则 当前 元 素 会 在 浮动 对 象 
于 | 底下 显示 。 
| 太 ”right: 清除 右边 的 浮动 对 象 ， 如 果 右 边 存 
”在 浮动 对 象 ， 则 当前 元 素 会 在 浮动 对 象 底 
计 、 且 入 村 ， 沪 示 半 色 闪 有 专业 到 和 d 的 这 本 指导 ， 力 来 在 了 方 互 划 五 信 的 : 下 显示 。 


nd A. | 
| 克 ”both: 清除 左右 两 边 的 浮动 对 象 ， 不 管 哪 


六 | 。 边 存在 浮动 对 象 ， 当 前 元 素 都 会 在 浮动 
| 对象 底 下 显示 。 


| 六 mone: 默认 值 ， 多 许 两 边 都 可 以 有 浮动 对 
| 象 ， 当 前 元 素 浮动 元 素 不 会 换行 显示 。 

| ”下面 通过 实例 介绍 清除 属性 的 使 用 ， 具 
| 体 代码 如 下 。 


浮动 的 自由 性 也 给 布局 带 来 很 多 麻烦 ， ， 
为 此 CSS 又 增加 了 clear 属 性 ， 它 能 够 在 一 定 程 ; 
度 上 控制 浮动 布局 中 出 现 的 混乱 现象 。clear 
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在 这 个 实例 中 ， 定 义 了 3 个 span 元 素 对 : 的 “float:left:” 浮 动 定义 ， 结 果 浏 览 器 会 忽 
象 ， 并 设置 它们 全 部 向 左 浮动 。 当 为 #span2 对 | 略 #span2 对 象 中 定义 的 “clear:left: ”属性 ， 
象 添加 “clearle 全 ”属性 后 ， 在 其 左 侧 已 经 存 ; jspan2 对 象 依然 环绕 显示 ， 如 图 14-5 所 示 。 
在 #span1 浮 动 对 象 ， 因 此 #span2 对 人 象 为 了 清除 | 


er) 


左 侧 浮动 对 象 ， 则 自动 排 到 底部 靠 左 显示 ， | ye mr EE 
跟随 #span2 对 象 的 #span3 浮 动 对 象 也 在 底部 按 | ! 
顺序 停留 ， 如 图 14-4 所 示 。 : 


图 14-4 清除 淳 动 


浮动 清除 只 能 适用 于 浮动 对 象 之 间 的 | 
清除 ， 不 能 为 非 浮动 对 象 定义 清除 属性 , 或 | 
者 说 为 非 浮动 对 象 定义 清除 属于 性 是 无 效 | 
的 。 在 上 面 的 实例 中 ， 删 除 #span2 选 择 符 中 


有 旧 14.1.4。” 层 布局 模型 
层 模 型 (Layer Model) 是 在 网 页 布局 中 引入 图 像 软 件 中 层 的 概念 ， 以 用 于 精确 定位 网 页 中 
的 元 素 。 这 种 网 页 布局 模式 的 初 衣 是 摆脱 HTML 上 默认 的 流动 模型 所 带 来 的 次 端 ， 以 层 的 方式 对 
网 页 元 素 进 行 精确 定位 与 层 丢 ， 从 而 增强 网 页 表现 的 丰富 性 。 
为 了 支持 层 布局 模型 ，CSS 提 供 了 position 属 性 进行 元 素 定 位 ， 以 方便 精确 地 定义 网 页 元 素 
的 相对 位 置 。 下 面 是 一 个 层 布 局 模型 的 实例 ， 代 码 如 下 。 
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这 个 实例 中 使 用 position 属 性 定义 了 不 同 的 定位 方式 ， 在 浏览 器 中 浏览 效果 ， 如 图 14-6 所 示 。 


图 14-6 层 布局 模型 


TEL 识 堂 实录 


层 模型 的 优点 如 下 所 述 。 
(1) 层 模 型 可 以 精确 定位 网页 中 元 素 的 相对 有 
有 位于， 可 以 相对 于 浏览 器 窗口 、 相 对 于 最 近 的 包 
上 入 元 素 、 或 相对 于 元 素 原来 的 位 置 。 

(2) 层 模 型 可 以 实现 元 素 之 间 的 层 登 显示 
上 效果 ， 这 在 流动 模型 中 是 不 具备 的 。 在 CSS 中 定 
祁 厅 的 eho 有 信条 现 位 雪 的 及 让 帮 各 


过 


撞 示 we 


层 模型 的 续 点 如 下 所 述 。 1 

网 页 市 局 与 图 像 处 理 有 一 定 的 差距 ， 层 模 上 
型 不 能 羔 顾 到 网 页 在 浏览 时 的 可 缩放 性 和 活动 | 
性 (如 浏览 器 大 小 缩放 、 区 块 中 内 容 会 变 长 缩 上 
短 ) ， 很 多 内 容 无 法 预测 与 控制 (如 循环 栏目 列 上 
表 可 能 会 无 限 拉 长 页 面 ) ， 因 而 全 部 使 用 层 模 型 有 
会 给 浏览 者 带 来 很 大 的 局 限 ， 同 时 无 法 自 过 应 网 上 
页 中 内 容 的 变化 。 I 


以 上 只 是 简要 叙述 了 流动 模型 、 浮 动 模型 和 层 模型 这 3 种 布局 类 型 的 一 些 基 本 知识 ， 在 页 


Hl 


实际 布局 过 程 中 ， 


上 富 的 网 页 布 


局 效果 。 


用 14.1.5 ”高 度 自 适应 


根据 窗 
适应 。 元 素 自 适 


网 页 布局 中 经 常 需要 定义 元 素 的 高 度 和 | 
宽度 ， 但 很 多 时 候 我 们 希望 元 素 的 大 小 能 够 | 


或 父 元 素 自动 调整 ， 这 就 是 元 素 自 : | 


适应 在 网 页 布局 中 非常 重要 ， 


它 能 够 使 网 页 显示 更 灵活 ， 可 以 适应 在 不 同 | 


设备 、 不 同窗 


和 不 同 分 辩 率 下 显示 。 


元 素 宽 度 


过 问题 是 元 素 高 度 自 适应 很 容易 让 人 困惑 ， 


设置 起 来 比较 麻烦 。 
下 面 是 一 个 简单 实例 ， 其 中 XHTML 结构 ; 
代码 如 下 所 示 。 
<div id="content"> 
<div id="sub"> 高 度 自 适应 </div> 
</div> 
其 CSS 布 局 代码 如 下 所 示 。 
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#content {/*< 定 义 父 元 素 显示 属性 >*/ 
background: #EC0;/* 背 景色 */ 


} 


#sub {/*< 定 义 子 元 素 显示 属性 >*/ 

width:50%;/* 父 元 素 宽度 的 一 半 */ 

height :50%;/* 父 元 素 高 度 的 一 半 */ 
background:#6C3; /+* 背 景色 */ 


} 


在 正 浏览 器 


自 适应 设置 起 来 比较 轻松 ,只 | 
需要 为 元 素 的 width 属性 定义 一 个 百分比 即 | 
可 ， 且 目前 各 大 浏览 器 对 此 都 完全 支持 。 不 | 


一 般 都 是 以 流动 模型 为 主 ， 同 时 辅 以 浮动 模型 和 层 模型 配合 使 用 ， 以 实现 


度 能 够 自 适应 ， 高 度 不 能 自 适 应 。 


Ai 


图 14-7 宽度 能 够 自 适 应 ， 高 度 不 能 自 过 应 
这 是 什么 原因 呢 ? 原来 在 正 浏览 器 中 html 
的 height 属 性 默认 为 100%，body 没 有 设置 值 ， 


| 而 在 非 IE 浏览 器 中 html 和 body 都 没有 预定 义 


”height 属 性 值 。 因 此 ， 解 决 高 度 自 适应 问题 可 
”以 使 用 下 面 的 CSS 代 码 。 


html,body { /*< 定 义 html 和 body 高 度 都 为 100%$>*/ 
height:100%;} 

#content { /*< 定 义 父 元 素 显示 属性 >*/ 
height:100%;  ”/* 满 屏 显 示 */ 
background:#FC0; /+* 背 景色 */ } 

#sub { ”/*< 定 义 子 元 素 显示 属 性 >*/ 
width:50%; ”/* 父 元 素 宽 度 的 一 半 */ 

height :50%; ”/* 父 元 素 高 度 的 一 半 */ 
background:#6C3; /* 背 景色 */ } 


中 显示 效果 如 图 14-7 所 示 ， 宽 


在 正中 浏览 ， 高 度 能 自 适应 ， 如 图 148 所 示 。 


图 14-8 高 度 自 过 应 
如 果 把 子 元 素 对 象 设置 为 浮动 显示 或 | 高 度 自 适应 对 于 布局 具有 重要 的 作用 ， 
者 绝对 定位 显示 ， 则 高 度 依然 能 够 实现 自 适 ; 可 以 利用 高 度 自 适应 实现 很 多 复杂 布局 效 
应 。CSS 布 局 代码 如 下 所 示 。 | 果 。 特别 是 对 于 绝对 定位 ， 突 破 了 原来 宽 、 


高 灵活 性 差 的 难题 ， 充 分 发 挥 绝对 定位 的 精 
定位 和 灵活 适应 的 双生 能力。 
| 人 ET 


无 论 使 用 表格 还 是 CSS， 网 页 布局 都 是 把 大 块 的 内 容 放 进 网 
页 的 不 同 区 域 里 面 。 有 了 CSS， 最 常用 来 组 织 内 容 的 元 素 就 是 <div> 标 签 。CSS 排 版 是 一 种 很 新 
的 排版 理念 ， 首 先 要 将 页 面 使 用 <div> 整 体 划分 几 个 板块 ， 然 后 对 各 个 板块 进行 CSS 定 位 ， 最 后 
在 各 个 板块 中 添加 相应 的 内 容 。 


用 14.2.1 将 页 面 用 div 分 块 

在 利用 CSS 布 局 页 面 时 ， 首 先 要 有 一 个 整体 的 规划 ， 包 括 整个 页 面 分 成 哪些 模块 ， 各 
个 模块 之 间 的 父子 关系 等 。 以 最 简单 的 框架 为 例 ， 页 面 由 Banner (导航 条 ) 、 主 体内 容 
(content) 、 菜 单 导 航 〈links) 和 脚注 〈footer) 几 个 部 分 组 成 ， 各 个 部 分 分 别 用 自己 的 id 来 标 
识 ， 如 图 14-9 所 示 。 


container 


content 


footer 


图 14-9 ”页面 内 容 框架 


课堂 实录 “se 一 @@ 
其 页 面 中 的 HIML 框 架 代 码 如 下 所 示 。 


实例 中 每 个 板块 都 是 一 个 <div>， 这 里 直接 使 用 CSS 中 的 id 来 表示 各 个 板块 ， 页 面 的 所 有 
Div 块 都 属于 container， 一 般 的 Div 排 版 都 会 在 最 外 面 加 上 这 个 父 Piv， 便 于 对 页 面 的 整体 进行 调 
整 。 对 于 每 个 Div 块 ， 还 可 以 再 加 入 各 种 元 素 或 行内 元 素 。 


轩 14.2.2 设计 各 块 的 位 置 
当 页 面 的 内 容 已 经 确定 后 ， 则 需要 根据 内 容 本 身 考虑 整体 的 页 面 布局 类 型 ， 如 是 单 栏 、 双 
栏 还 是 三 栏 等 ， 这 里 采用 的 布局 如 图 14-10 所 示 。 


Container 


foorer 


图 14-10 简单 的 页 面 框架 
由 图 14-10 可 以 看 出 ， 在 页 面 外 部 有 一 个 整体 的 框架 container，banner 位 于 页 面 整 体 框架 中 
的 最 上 方 ，content 与 links 位 于 页 面 的 中 部 ， 其 中 content 占 据 着 页 面 的 绝 大 部 分 ， 最 下 面 是 页 面 
的 脚注 footer。 


转 14.2.3 用 CSSs 定 位 一 一 
整理 好 页 面 的 框架 后 ， 就 可 以 利用 CSS | 
对 各 个 板块 进行 定位 ， 实 现 对 页 面 的 整体 规 | 


划 ， 再 往 各 个 板块 中 添加 内 容 。 上 面 代 码 设置 了 页 面 的 边界 、 页 面 文本 
下 面 首先 对 body 标 记 与 container 父 块 进行 ; 的 对 齐 方式 ， 以 及 父 块 的 宽度 为 800px。 下 面 
设置 ，CSS 代 码 如 下 所 示 。 | 来 设置 banner 板 块 ， 其 CSS 代 码 如 下 所 示 。 


@ 。o 第 14 课 [SSSIDIZS 本 有 


这 里 设置 了 banner 板 块 的 边界 、 填 充 、 背 ; 性 ， 因 此 footer 需 要 设置 clear 属 性 ， 使 其 不 受 
景 颜 色 等 。 动 的 影响 ， 代 码 如 下 所 示 。 

下 面 利用 float 方 法 将 content 移 动 到 左 侧 ， 
links 移 动 到 页 面 右 侧 ， 这 里 分 别 设置 了 这 两 
个 板块 的 宽度 和 高 度 ， 读 者 可 以 根据 需要 自 
己 调整 。 


: 这 样 页 面 的 整体 框架 便 搭 建 好 了 ， 这 里 
| 需要 指出 的 是 ，content 块 中 不 能 放宽 度 太 长 
的 元 素 ， 如 很 长 的 图 片 或 不 折 行 的 英文 等 ， 
| 否则 links 将 再 次 被 挤 到 content 下 方 。 
: 特别 的 ， 如 果 后 期 维护 时 希望 content 的 
| 位 置 与 jinks 对 调 ， 仅 仅 只 需要 将 content 和 1links 
} 属性 中 的 left 和 right 改 变 。 这 是 用 传统 的 排版 
| 方式 所 不 可 能 简单 实现 的 ， 这 也 正 是 CSS 排 版 
| 的 魅力 之 一 。 
| 另外 ， 如 果 links 的 内 容 比 content 的 长 ， 
于 content 和 links 对 象 都 设置 了 浮动 属 | 在 下 浏览 器 上 footer 就 会 贴 在 content 下 方 而 与 
| links 出 现 重合 。 


本 节 重 点 介绍 如 何 使 用 DIV+CSS 创 建 固定 宽度 布局 ， 对 于 包 
Fey 由 于 它们 在 流 式 布局 中 不 能 很 好 地 表现 ， 因 此 固定 宽度 布局 
也 是 处 理 这 种 内 容 的 最 好 方法 。 


肯 14.3.1 课堂 小 实例 


列 固 定 宽度 


一 列 式 布局 是 所 有 布局 的 基础 ， 也 是 最 简单 的 布局 形式 。 一 列 固 定 宽度 中 ， 宽 度 的 属性 值 
是 固定 像素 。 下 面 举 例 说 明 一 到 固有 帘 诬 的 布局 方法 具体 步骤 如 下 。 
回 在 HTMI 文 档 的 <head> 与 <head> 之 问 相应 的 位 置 j 
输入 定义 的 CSS 样 式 代码 ， 如 下 所 示 。 | 


| 然后 在 HTMIL 文 档 的 <body> 与 <body> 之 间 
的 正文 中 输入 以 下 代码 ， 给 div 使 用 了 layer 
作为 id 名 称 。 
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TELTS 识 堂 实录 “ee 一 个 


<div id="content">1 列 固定 宽度 </div> 


国 在 浏览 器 中 浏览 ， 由 于 是 固定 宽度 ， 无 论 怎样 改变 浏览 器 窗口 大 小 ，Div 的 宽度 都 不 改变 ， 如 
图 14-11 和 图 14-12 所 示 。 


CS 
从 


C 


| = c- 


图 14-11 浏览 器 窗口 变 小 效果 图 14-12 浏览 器 窗口 变 大 效果 
在 网 页 布局 中 所 示 1 列 固定 宽度 是 常见 的 网 页 布局 方式 ， 多 用 于 封面 型 的 主页 设计 中 ， 如 
图 14-13 和 图 14-14 所 示 。 


图 14-13 1 列国 定 宽度 布局 图 14-14 1 列国 定 宽度 布局 


页 面 居中 是 常用 的 网 页 设计 表现 形式 之 一 ， 传 统 的 表格 式 布 局 中 ， 用 “align="center"” 后 性 未 实现 下 
格 居中 显示 。Div 本 身 也 支持 “align="center"” 属 性 ， 同 样 可 以 实现 居中 ， 但 是 Web 标 准 化 时 代 ， 这 个 不 是 
我 们 想 要 的 结果 ， 因 为 不 能 实现 表现 与 内 容 的 分 离 。 


国 14.3.2 课堂 小 实例 列 自 适 应 

自 适应 布局 是 在 网 页 设计 中 常见 的 一 种 布局 形式 ， 自 适应 的 布局 能 够 根据 浏览 器 窗口 的 大 
小 ， 自 动 改变 其 宽度 或 高 度 值 ， 是 一 种 非常 灵活 的 布局 形式 ， 良 好 的 自 适应 布局 网 站 对 不 同 分 
辨 率 的 显示 器 都 能 提供 最 好 的 显示 效果 。 自 适应 布局 需要 将 宽度 由 固定 值 改 为 百分比 。 下 面 是 
一 列 自 适应 布局 的 CSS 代 码 。 


<!ldoctype html> 


<html> 
<head> 
<meta charset="utf-8"> 


<title>1 列 自 适应 </title> 
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这 里 将 宽度 和 高 度 值 都 设置 为 70% ， 从 浏览 效果 中 可 以 看 到 ，Div 的 宽度 已 经 变 为 了 浏览 
器 宽度 的 70% 的 值 ， 当 扩大 或 缩小 浏览 器 窗口 大 小 时 ， 其 宽度 和 高 度 还 将 维持 在 与 浏览 器 当前 
宽度 比例 的 70% 。 如 图 14-15 和 图 14-16 所 示 。 


eax™| 


于 一 二 | 
HIAI43Z 硬 -CX 


图 14.15 窗口 记 小 图 4-16 窗口 变 大 


自 适应 布局 是 比较 常见 的 网 页 布局 方式 ， 图 14-17 所 示 的 网 页 就 采用 自 适应 布局 。 


LING 


图 14-17 自 适应 布局 


国 14.3.3 ”课堂 小 实例 一 -两 列 固 定 宽度 一 一 一 一 一 一 一 一 一 0 
有 了 一 列 固定 宽度 作为 基础 ， 二 列 固定 宽度 就 非常 简单 。 我 们 知道 div 用 于 对 某 一 个 区 域 的 
标识 ， 而 二 列 的 布局 ， 自 然 需要 用 到 两 个 div。 
两 列 固定 宽度 非常 简单 ， 两 列 的 布局 需要 用 到 两 个 div， 分 别 把 两 个 div 的 id 设置 为 left 与 
right， 表 示 两 个 div 的 名 称 。 首 先 为 它们 设置 宽度 ， 然 后 让 两 个 div 在 水 平 线 中 并 排 显示 ， 从 而 
形成 两 列 式 布局 ， 具 体 步骤 如 下 。 
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7 二 二 ET 


<style> 

#1left{ 
background-color:#00cc33; 
border:lpx solid #ff3399; 
width:250px; 
height:250px; 


回 在 HIML 文 档 的 <head> 与 </head> 之 间 相 应 的 | | Ee = 5 es 
位 置 输入 定义 的 CSS 样 式 代码 ， 如 下 所 示 。 | ee mm 


float:left; 
} 

#right{ 
background-color:#ffcc33; 图 14-18 两 列 固定 宽度 布局 
border:1px solid #ff3399; 
width:250px; 
height:250px; 
float:left; 


册 100% 


Welcome to the Mary Valley 


} 
</style> 


Naps 


上 left 与 right 两 个 div 的 代码 与 前 面 类 似 ， 两 个 上 : 
上 qiv 使 用 相同 宽度 实现 两 列 式 布 局 。float 属 性 是 CSS 目 ， 
上 布局 中 非常 重要 的 属性 ， 用 于 控制 对 象 的 浮动 布 有 ， 
上 1 局 方式 ， 大 部 分 div 布 局 基本 上 都 通过 float 的 控制 上 | 
上 来 实现 的 。float 使 用 none 值 时 表示 对 象 不 浮动 ， 而 肯 : 
上 使 用 left 时 ， 对 象 将 向 左 浮动 ， 例 如 本 例 中 的 div 使 有， 
上 用 了 “floatlefi;” 之 后 ，div 对 象 将 向 左 浮动 。 


| 
园 然后 在 HTML 文 档 的 <body> 与 <body> 之 间 
的 正文 中 输入 以 下 代码 ， 给 div 使 用 left 和 
right 作 为 id 名 称 。 | 
<div id="left"> 左 列 </div> 
<div id="right"> 右 列 </div> | 
国 在 使 用 了 简单 的 float 属 性 之 后 ， 二 列 固 . 
度 的 页 面 就 能 并 排 显示 出 来 。 在 
浏览 器 中 浏览 ， 两 列 固定 宽度 布局 如 | 
图 14-18 所 示 | 
图 14-19 所 示 的 网 页 两 列 宽度 都 是 固定 | 
无 论 怎样 改变 浏览 器 窗口 大 小 ， 两 列 的 


0 图 14-19 ”两 列 宽 度 部 是 国定 的 
轩 14.3.4 课堂 小 实例 一 一 两 列 宽度 自 适应 


下 面 使 用 两 列 宽度 自 适应 性 ， 来 实现 左右 栏 宽 度 能 够 做 到 自动 适应 ， 设 置 自 适应 主要 通 ; 
宽度 的 百分比 值 设置 。CSS 代 码 修改 为 如 下 。 


党 
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<style> 

#left{background-color:#00cc33; border:lpx solid #ff3399; width:60%; 
height:250px;float:left;} 

#right {background-color:#ffcc33;border:lpx solid #ff3399; width:30%; 
height:250px;float:left;} 

</style> 


图 14-20 浏览 器 窗口 变 小 效果 


这 里 主要 修改 了 左 栏 宽度 为 60%， 右 栏 ; 应 布局 。 
宽度 为 30% 。 在 浏览 器 中 浏览 效果 ， 如 图 | ol 
14-20 和 图 14-21 所 示 ， 无 论 怎样 改变 浏览 器 窗 | wd 
大 小 ， 左 右 两 栏 的 宽度 与 浏览 器 窗口 的 百 分 | 
比 都 不 改变 。 Ningof or 
一 一 一 一 一 一 EYEY ! 
| 全 | DAHTML+CSS 网 = 与 布局 光 好 必 颗 C| 全 -Cx | ! 
一 一 一 1 Offnungszeiten: 
|S rimesg | 9 
| 文件 由 坑 才 中 查看 V) 收 基 实 A)。 工具。 帮 动 (H) oe | re 
ER 
我 100% = | 


图 14-21 浏览 器 窗口 变 大 效果 


图 14-22 两 列 宽度 自 适 应 布局 


图 14-22 所 示 的 网 页 采 


用 两 列 宽度 自 适 | 


肯 14.3.5 


课堂 小 实例 一 一 两 列 右 列 宽度 自 ; 


在 实际 应 


中 ， 有 时 候 需 要 左 栏 固 


定 宽 度 ， 右 栏 根据 浏览 器 窗口 大 小 自动 适应 ， 在 CSSd 


十 


只 需要 设置 左 栏 的 宽度 即 可 ， 如 上 例 中 左右 栏 都 采用 了 百分比 实现 了 宽度 自 适 应 ， 这 里 只 需要 
将 左 栏 宽度 设 定 为 固定 值 ， 右 栏 不 设置 任何 宽度 值 ， 并 且 右 栏 不 浮动 ，CSS 样 式 代码 如 下 。 


<style> 


#1left{ background-color:#00cc33;border:lpx solid #ff3399;width:200px; 
height:250px;float:left;} 
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#right{background-color:#ffcc33;border:]lpx solid #ff3399; height:250px;} 


</style> 
这 样 ， 左 栏 将 呈现 200px 的 宽度 ， 而 右 栏 将 根据 浏览 器 窗口 大 小 自动 适应 ， 如 图 14-23 和 
图 14-24 所 示 。 
EX 一 
a re 5 网 商 人 与 司 是 人 效果 CH1414 3. 两 风 右 玉 机 二 到 应 htrm 国 5 -cx 卫生 
rT Cx EE 


ETE 


[EL 
芭 件 月” 六 太 这 大 MW] 必 训 AA】 工具 1] 客 ( 少 


00% R00% 


图 14-23 右 列 宽度 自 适 应 图 14-24 右 列 宽度 自 适应 


国 14.3.6 课堂 小 实例 一 一 三 列 浮动 中 间 宽 度 自 适 应 

使 用 浮动 定位 方式 ， 从 一 列 到 多 列 的 固定 宽度 及 自 适应 ， 基 本 上 可 以 简单 完成 ， 包 括 三 列 
的 固定 宽度 。 而 在 这 里 给 我 们 提出 了 一 个 新 的 要 求 ， 希 望 有 一 个 三 列 式 布局 ， 其 中 左 栏 要 求 固 
定 宽度 ， 并 居 左 显示 ， 右 栏 要 求 固 定 宽度 ， 并 居 右 显示 ， 而 中 间 栏 需要 在 左 栏 和 右 栏 的 中 间 ， 
根据 左右 栏 的 间距 变化 自动 适应 。 

在 开始 这 样 的 三 列 布局 之 前 ， 有 必要 了 解 一 个 新 的 定位 方式 一 一 绝对 定位 。 前 面 的 浮动 定 
位 方式 主要 由 浏览 器 根据 对 象 的 内 容 自动 进行 浮动 方向 的 调整 ， 但 是 这 种 方式 不 能 满足 定位 需 
求 时 ， 就 需要 新 的 方法 来 实现 。CSS 提 供 了 除去 浮动 定位 之 外 的 另 一 种 定位 方式 ， 就 是 绝对 定 
位 ， 绝 对 定位 使 用 position 属 性 来 实现 。 

下 面 讲述 三 列 浮动 中 间 宽 度 自 适应 布局 的 创建 ， 具 体操 作 步 骤 如 下 。 
国 在 HTMIL 文 档 的 <head> 与 <head> 之 间 相应 的 位 置 输入 定义 的 CSS 样 式 代码 ， 如 下 所 示 。 


<style> 


body{ margin:0px; } 

#1left{ background-color:#ffcc00; border:3px solid #333333; width:100px; 
height:250px; position:absolute; top:0px; left:0px; } 

#center{ background-color:#ccffcc; border:3px solid #333333; height:250px; 
margin-left:100px; margin-right:100px; } 

#right{ 
background-color:#ffcc00; border:3px solid #333333; width:100px; 
height:250px; position:absolute; right:0px; top:0px; } 

</style> 

加 然后 在 HIML 文 档 的 <body> 与 <body> 之 间 的 正文 中 输入 以 下 代码 ， 给 div 使 用 left、right 和 center 
作为 id 名 称 。 

<div id="left"> 左 列 </div> 

<div id="center"> 中 间 列 </div> 

<div id="right"> 右 列 </div> 
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园 在 浏览 器 中 浏览 效果 ， 如 图 14-25 和 图 14-26 所 示 。 


i 
忆 DHTML+CSSR 三 局 要 st\CHIANIA 


由 有 Ra 二 EV) 


二 1003%6 


图 14-25 中间 宽 度 自 过 应 图 14-26 中间 宽 度 自 适 应 
图 14-27 所 示 的 网 页 采用 三 列 浮动 中 间 宽 度 自 适应 布局 。 


图 14-27 三 列 浮动 中 间 宽 度 自 适 应 布局 


由 14.3.7 课堂 小 实例 一 一 三 行 二 列 居中 高 度 自 适 应 布局 

如 何 使 整个 页 面 内 容 居 中 ， 如 何 使 高 度 适应 内 容 自动 伸缩 。 这 是 学 习 CSS 布 局 最 常见 的 问 
题 。 下 面 讲述 三 行 二 列 居 中 高 度 自 适 应 布局 的 创建 ， 具 体操 作 步 怠 如 下 。 

园 在 HTMI 文 档 的 <head> 与 </head> 之 间 相应 的 位 置 输入 定义 的 CSS 样 式 代码 ， 如 下 所 示 。 


<style type="text/css"> 

#header{ width:776px; margin-right: auto; margin-left: auto; padding: Opx; 
background: #ff9900; height:60px; text-align:left; } 
#contain{margin-right: auto; margin-left: auto; width: 776px; } 
#mainbg{width:776px; padding: Opx;background: #60A179; float: left;} 
#right{float: right; margin: 2px Opx 2px Opx; padding:0px; width: 574px; 
background: #ccd2de; text-align:left; } 

#left{ float: left; margin: 2px 2px 0px Opx; padding: Opx; 

background: #F2F3F7; width: 200px; text-align:left; } 

#footer{ clear:both; width:776px; margin-right: auto; margin-left: auto; padding: Opx; 
background: #ff9900; height:60px;} 

.text{margin:0px;padding:20px;} 

</style> 
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ee 一 个 


然后 在 HIMIL 文 档 的 <body> 与 <body> 之 


作为 id 名 称 。 


<div id="header"> 页 眉 </div> 


<div id="contain"> 
<div id="mainbg"> 
<div id="right"> 


<div class="text"> 右 


<div id="header"> 页 眉 </div> 
<div id="contain"> 
<div id="mainbg"> 
<div id="right"> 
<div class="text"> 右 
<p>&nbsp;</p> 
<p>&nbsp;</p> 
<p>&nbsp;</p> 
<p></p> 
<p></p> 
</div> 
</div> 
<div id="left"> 
<div class="text"> 左 </div> 
</div> 
</div> 
</div> 
<div id="footer"> 页 脚 </div> 
</div> 
</div> 
<div id="left"> 
<div class="text"> 左 </div> 
</div> 
</div> 
</div> 


<div id="footer"> 页 脚 </div> 


园 在 浏览 器 中 浏览 效果 ， 如 图 


14-28 所 示 。 


间 的 正 


a 


输入 以 下 代码 ， 


给 div 使 


left、 right 和 center 


图 14-28 三 行 二 列 居中 高 度 自 适 应 布局 
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图 14-29 所 示 的 网 页 采用 三 行 二 列 居中 高 度 自 适 应 布局 。 


lime 


Featured Solutions OurTeam ContactUs 


Site Help: ©accessibilty | ac 


Ths Wehr ua vahd tim nd cat 


图 14-29 三 行 二 列 居 中 高 度 自 适应 布局 


| 4 4 课 后 练习 
© 
填空 是 


(1) 所 有 CSS 布 局 技术 都 是 立 在 、 
和 这 4 个 最 基本 的 概念 之 上 的 。 
(2)_ 是 HIML 中 默认 的 网 页 布局 模式 ， 在 一 般 状 态 下 ， 网 页 中 元 素 的 布 
局 都 是 以 流动 模型 为 默认 的 显示 方式 。 
(3) 的 布局 能 够 根据 浏览 器 窗口 的 大 小 ， 自 动 改 变 其 宽度 或 高 度 值 ， 
是 一 种 非常 灵活 的 布局 形式 ， 良 好 的 自 适 应 布局 网 站 对 不 同 分 辨 率 的 显示 器 都 能 提供 最 好 的 显 
示 效 果 。 


CSS+DIV 是 网 站 标准 中 常用 的 术语 之 一 。CSS 和 DIV 的 结构 
被 越 来 越 多 的 人 采用 ， 很 多 人 都 抛弃 了 表格 而 使 用 CSS 来 布局 页 面 。 它 的 好 处 很 多 ， 可 以 使 结 
构 简洁 ， 定 位 更 灵活 。CSS 布 局 的 最 终 目的 是 搭建 完善 的 页 面 架 构 。 利 用 CSS 排 版 的 页 面 ， 更 
新 起 来 十 分 容易 ， 甚 至 连 页 面 的 结构 都 可 以 通过 修改 CSS 属 性 来 重新 定位 。 
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第 Sh 综合 案例 篇 


第 15 课 
设计 制作 企业 网 站 


本 课 导 读 
企业 在 网 上 形象 的 树立 已 成 为 企业 宣传 的 
重点 ， 越 来 越 多 的 企业 更 加 重视 自己 的 网 站 。 企 
业 通 过 对 企业 信息 的 系统 介绍 ， 让 浏览 者 了 解 企 
业 所 提供 的 产品 和 服务 ， 并 通过 有 效 的 在 线 交流 
方式 搭 起 客户 与 企业 间 的 桥梁 。 企 业 网 站 的 建设 
能 够 提高 企业 的 形象 ， 并 且 吸 引 更 多 的 人 关注 公 
司 ， 以 获得 更 大 的 发 展 。 


技术 要 点 
熟悉 企业 网 站 的 设计 
熟悉 企业 网 站 布局 设计 分 析 
掌握 企业 网 站 页 面 的 具体 制 
作 过 程 


企业 网 站 效果 


19. | 


企业 文化 的 载体 ， 通 过 视觉 元 素 ， 承 接 
企业 所 处 的 行业 、 企 业 自 身 的 特点 。 
作出 适合 企业 特点 的 网 站 。 


用 15.1.1 企业 网 站 分 类 
企业 类 网 站 可 以 分 为 以 下 几 类 。 


1. 以 形象 为 主 的 企业 网 站 
互联 网 作为 新 经 


位 ， 成 为 公司 以 最 低 的 成 本 在 更 广 的 范 


济 时 代 一 种 新 型 传播 | 如 
媒体 ， 在 企业 宣传 中 发 挥 着 越 来 越 重要 的 地 | 
围 内 | 
宣传 企业 形象 ， 开 辟 营 销 渠道 ， 加 强 与 客户 | 


@-。” 第 15 课 DW 
企业 网 站 


统计 概述 


企业 网 站 是 商业 性 和 艺术 性 的 结合 ， 同 时 企业 网 站 也 是 一 
榜 企 业 的 文化 和 企业 的 品牌 。 
企业 的 主要 客户 群 ， 以 及 企业 最 全 的 资讯 等 信息 ， 才 能 制 


制作 企业 网 站 通常 需要 根据 


| 主推 产品 放置 在 网 站 首页 。 产 品 资料 分 类 整 
| 理 ， 


附带 详细 说 明 ， 使 客户 能 够 看 个 明白 。 
如 果 公 司 产品 比较 多 ， 最 好 采用 动态 更 新 的 
方式 添加 产品 介绍 和 图 片 ， 通 过 后 人 台 来 控制 
前 台 信 息 。 

为 了 醒目 ， 可 以 分 出 两 个 导航 条 ， 把 产 


沟通 的 一 项 必 不 可 少 的 重要 工具 。 
为 以 形象 为 主 的 企业 网 站 。 


图 15-1 以 形象 为 主 的 企业 网 站 | 
这 类 网 站 设计 时 要 参考 一 些 大 型 同行 业 | 


网 站 进行 分 析 ， 多 吸收 它们 的 优点 ， 
自己 的 特色 进行 设计 ， 整 个 网 站 要 以 国 
为 主 。 要 以 企业 形象 及 行业 特色 加 上 动感 音 


乐 作 片 头 动画 ， 每 个 页 面 配 以 栏目 相关 的 动 
创造 一 种 独特 ， 


画 衬托 ， 通 过 
的 企业 文化 。 
2. 以 产品 为 主 的 企业 网 站 

企业 上 网 的 目的 绝 大 多 数 是 为 了 介绍 
中 小 型 企业 尤为 如 此 ， 在 公司 介绍 


良好 的 网 站 视觉 


15-1 所 示 | 
| 导航 按钮 标注 出 产品 分 类 。 网 页 的 插 
; 体现 产品 为 主 ， 


| 为 主 的 企业 网 站 


以 公司 ; 
际 化 | 


| 象 ， 还 需要 建立 自己 的 信息 平 
一 页 文字 ， 而 产品 栏目 则 是 大 量 的 ， 
和 文字 。 以 产品 为 主 的 企业 网 站 可 以 把 ; 


品 导 航 放 在 明显 的 地 方 ， 或 是 用 特殊 样式 的 
图 应 以 
营造 企业 形象 为 辅 ， 尽 量 做 
到 两 方面 能 够 协调 到 位 。 图 15-2 所 示 为 以 产品 


i 


和 oo 


REND WE 


0 pr 


图 15-2 ”以 产品 为 主 的 企业 网 站 


3. 信息 量 大 的 企业 站 点 


很 多 企业 不 仅仅 需要 树立 良好 的 企业 形 
人 台 。 有 实力 的 
企业 逐渐 把 网 站 做 成 一 种 以 其 产品 为 主 的 商 
务 型 网 站 。 对 于 企业 而 言 ， 通 过 商务 网 站 可 
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以 实现 以 下 功能 :通过 因特网 号 于 TE 国际 集团 机 械 仪表 配件 有 限 公 司 
扩大 宣传 ， 提 高 企业 知名 度 ; 1 LE 


让 更 多 客户 以 更 便捷 的 方式 了 
解 企 业 产品 ， 实 现 网 上 订购 、 
网 上 信息 实时 反馈 等 电子 商务 
功能 。 图 15-3 所 示 为 信息 量 大 


的 企业 网 站 。 
图 15-3 信息 量 大 的 企业 网 站 
中 15.1.2 企业 网 站 主要 功能 ° 
一 般 企 业 网 站 主要 有 以 下 功能 。 
友 ”公司 概况 : 包括 公司 背景 、 发 展 历史 、 主 要 业绩 、 经 营 理念 、 经 营 目 标 及 组 织 结构 等 ， 让 


太 
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用 户 对 公司 的 情况 有 一 个 概括 的 了 解 。 

企业 新 闻 动态 ， 可 以 利用 互联 网 的 信息 传播 优势 ， 构 建 一 个 企业 新 闻 发 布 平台 ， 通 过 建立 
一 个 新 闻 发 布 /管理 系统 ， 企 业 信息 发 布 与 管理 将 变 得 简单 、 迅 速 ， 及 时 向 互联 网 发 布 本 企 
业 的 新 闻 、 公 告 等 信息 。 通 过 公司 动态 可 以 让 用 户 了 解 公司 的 发 展 动向 ， 加 深 对 公司 的 印 
象 ， 从 而 达到 展示 企业 实力 和 形象 的 目的 。 图 15-4 所 示 为 本 例 制 作 的 企业 网 站 新 闻 动 态 部 
分 。 

产品 或 展示 : 如 果 企业 提供 多 种 产品 或 服务 ， 利 用 展示 系统 进行 系统 的 管理 ， 包 括 产品 或 
图 片 的 添加 与 删除 、 产 品类 别 的 添加 与 删除 、 推 荐 产品 的 管理 、 产 品 的 快速 搜索 等 ， 可 以 
方便 高 效 地 管理 网 上 产品 ， 为 网 上 客户 提供 一 个 全 面 的 产品 展示 和 平台， 更 重要 的 是 网 站 可 
以 通过 某 种 方式 建立 起 与 客户 的 有 效 沟 通 ， 更 好 地 与 客户 进行 对 话 ， 收 集 反 馈 信息 ， 从 而 
改进 产品 质量 和 提供 服务 水 平 。 图 15-5 所 示 为 景点 展示 。 


图 15-4 企业 新 闻 动 态 15-5 景点 展示 
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太 网 上 招聘 : 这 也 是 网 络 应 用 的 一 个 重要 方面 ， 网 上 招聘 系统 可 以 根据 企业 自身 特点 ， 建 立 
一 个 企业 网 络 人 才 库 ， 人 才 库 对 外 可 以 进行 在 线 网 络 即 时 招聘 ， 对 内 可 以 方便 管理 人 员 对 
召 聘 信息 和 应 聘 人 员 的 管理 ， 同 时 人 才 库 可 以 为 企业 储备 人 才 ， 为 日 后 需要 时 使 用 。 

六 ”销售 网 络 : 目前 用 户 直 接 在 网 站 订货 的 并 不 多 ， 但 网 上 看 货 网 下 购买 的 现象 比较 普遍 ， 尤 
其 是 价格 比较 贵重 或 销售 渠道 比较 少 的 商品 ， 用 户 通常 喜欢 通过 网 络 获取 足够 的 信息 后 ， 
在 本 地 的 实体 商场 购买 。 因 此 尽 可 能 详尽 地 告诉 用 户 在 什么 地 方 可 以 买 到 他 所 需要 的 
产品 。 

太 售后 服务 ， 有 关 质 量 保证 条 款 、 售 后 服务 措施 ， 及 各 地 售后 服务 的 联系 方式 等 都 是 用 户 比 
较 关 心 的 信息 。 而 且 ， 是 否 可 以 在 本 地 获得 售后 服务 往往 是 影响 用 户 购 买 决策 的 重要 因 
素 ， 对 于 这 些 信息 应 该 尽 可 能 详细 地 提供 。 

六 ”技术 支持 :这 一 点 对 于 生产 或 销售 高 科技 产品 的 公司 尤为 重要 ， 网 站 上 除了 产品 说 明 书 之 
外 ， 企 业 还 应 该 将 用 户 关心 的 技术 问题 及 其 答案 公布 在 网 上 ， 如 一 些 常见 故障 处 理 、 产 品 
的 驱动 程序 、 软 件 工 具 的 版 本 等 信息 资料 ， 可 以 用 在 线 提问 或 常见 问题 回答 的 方式 体现 。 

太 ”联系 信息 ; 网 站 上 应 该 提供 足够 详尽 的 联系 信息 ， 除 了 公司 的 地 址 、 电 话 、 传 真 、 邮 政 编 
码 、 网 管 E-mail 地 址 等 基本 信息 之 外 ， 最 好 能 详细 地 列 出 客户 或 者 业务 伙伴 可 能 需要 联系 
的 具体 部 门 的 联系 方式 。 对 于 有 分 支 机 构 的 企业 ， 同 时 还 应 当 有 各 地 分 支 机 构 的 联系 方 
式 ， 在 为 用 户 提 供 方便 的 同时 ， 也 起 到 了 对 各 地 业务 的 支持 作用 。 


虽 15.1.3 页面 配色 与 风格 设计 
企业 网 站 给 人 的 第 一 印象 是 网 站 的 色彩 ， 因 此 确定 网 站 的 色彩 搭配 是 相当 重要 的 一 步 。 一 
般 来 说 ， 一 个 网 站 的 标准 色彩 不 应 一 一 一 一 一 
超过 3 种 ， 太 多 则 让 人 眼花 练 乱 。 
标准 色彩 用 于 网 站 的 标志 、 标 题 、 
导航 栏 和 主 色 块 ， 给 人 以 整体 统一 
的 感觉 。 至 于 其 他 色彩 在 网 站 中 也 
可 以 使 用 ， 但 只 能 作为 点 缀 和 衬 
托 ， 决 不 能 喧 宾 夺 主 。 
绿色 在 企业 网 站 中 也 是 使 用 较 
多 的 一 种 色彩 。 在 使 用 绿色 作为 企 区 地 请 
业 网 站 的 主 色调 时 ， 通 常会 使 用 浙 
变色 过 渡 ， 使 页 面具 有 立体 的 空间 
感 。 图 15-6 所 示 为 旅游 企业 网 站 的 
配色 。 


图 15-6 旅游 企业 网 站 的 配色 
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在 设计 企业 网 站 时 ， 要 采用 统一 的 风格 和 结构 来 把 各 页 面 组 织 在 一 起 。 所 选择 的 颜 
体 、 图 形 即 页 面 布 局 应 能 传达 给 用 户 一 个 形象 化 的 主题 ， 并 引导 他 们 去 关注 站 点 的 内 容 。 
风格 是 指 站 点 的 整体 形象 给 浏览 者 的 综合 感受 。 包 括 站 点 的 CI 标志 、 色 彩 、 字 体 、 标 语 、 

版 面 布局 、 浏 览 方式 、 内 容 价值 、 存 在 意义 、 站 点 荣誉 等 诸多 因素 。 

企业 网 站 的 风格 体现 在 企业 的 Logo、CI， 企 业 的 用 色 等 多 方面 。 企 业 用 什么 样 的 色调 ， 上 

什么 样 的 CI， 是 区 别 于 其 他 企业 的 一 种 重要 的 手段 。 如 果 风 格 设计 的 不 好 会 对 客户 造成 不 良 影 响 。 

以 下 步骤 可 以 树立 网 站 风格 。 

团 首先 必须 保证 内 容 的 质量 和 价值 性 。 

园 其 次 需要 搞 清楚 自己 希望 网 站 给 人 的 印象 是 什么 。 

园 在 明确 自己 的 网 站 印象 后 ， 建 立 和 加 强 这 种 印象 。 需 要 进一步 找 出 其 中 最 有 特点 的 东西 ， 就 是 
最 能 体现 网 站 风格 的 东西 ， 并 作为 网 站 的 特色 加 以 重点 强化 宣传 。 如 再 次 审查 网 站 名 称 、 域 
名 、 栏 目 名 称 是 否 符合 这 种 个 性 ， 是 否 易 记 ;审查 网 站 标准 色彩 是 否 容易 联想 到 这 种 特色 ， 是 
否 能 体现 网 站 的 风格 等 。 

对 企业 网 站 从 设计 风格 上 进行 创新 ， 需 要 多 方面 元 素 的 配合 ， 如 页 面色 彩 构成 、 图 片 布 

局 、 内 容 安 排 等 。 这 需要 用 不 同 的 设计 手法 表现 出 页 面 的 视觉 效果 。 


国 15.1.4 排版 构架 
设计 购物 网 站 时 首先 要 抓 住 商品 展示 的 特点 ， 合 理 布局 各 个 板块 ， 显 著 位 置 留 给 重点 宣传 


[a 
向 


使 浏览 者 渐进 接受 。 为 了 

将 丰富 的 含义 和 多 样 的 形 

式 组 织 成 统一 的 页 面 结构 

形式 ， 应 灵活 运用 各 种 手 

段 ， 通 过 空间 、 文 字 、 图 eeder 

形 之 间 的 相互 关系 建立 整 

体 的 均衡 状态 ， 产 生 和 谐 

的 美感 。 点 、 线 、 面 相 结 

合 ， 充 分 表达 完美 的 设计 

意境 ， 使 用 户 可 以 从 主页 

获得 有 价值 的 信息 。 图 

15-7 所 示 为 页 面 布 局 图 。 
本 课 网 页 的 结构 属 

于 三 行 三 列 式 布局 。 顶 行 

于 显示 header 对 象 中 的 | 

网 站 导航 按钮 和 Banner 信 

息 ， 底 部 部 分 footer 放 置 

网 站 的 版 权 信息 ， 中 间 部 

分 content 分 三 列 显 示 网 站 

的 主要 内 容 。 

1 于 本 网 站 包含 大 量 footer 

的 图 文 信息 内 容 ， 浏 览 者 


欢迎 到 清凉 谷 度假 关 沂 


图 15-7 页 面 布局 图 
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面 对 繁 杂 的 信息 ， 如 何 快速 地 找到 所 需 信 息 ， 是 需要 考虑 的 一 个 首要 问题 。 因 此 页 面 导 航 在 网 
站 中 非常 重要 。 
其 页 面 中 的 HTML 框 架 代 码 如 下 所 示 。 


立 BS 入 
] 各 部 分 设计 
@ 由 上 一 节 的 分 析 可 以 看 出 ， 页 面 的 整体 框架 并 不 复杂 ， 下 面 


就 具体 制作 各 个 模块 ， 制 作 时 采用 从 上 而 下 ， 从 左 到 右 的 制作 顺序 。 
由 15.2.1 页 面 的 通用 规则 一 一 一 一 一 一 一 一 一 一 一 一 一 0 
CSS 的 开始 部 分 定义 页 面 的 body 属 性 和 一 些 通用 规则 ， 具 体 代码 如 下 。 


由 课堂 实录 “ee 一 全 


定义 完 网 页 的 整体 页 边 距 和 背景 颜色 ， 以 及 网 页 内 标题 元 素 和 span 元 素 的 边 距 后 ， 页 面 实 


例 效 果 如 图 15-8 所 示 。 
| 也 篇 ”页 面 人 ”安全 外 ”I 具 叫 - 因 - ” 


帝 收藏 天 | 夸 旅游 最 区 网 


图 15-8 ”定义 页 面 通用 规则 后 的 效果 


肘 15.2.2 ”制作 网 站 导航 部 分 
一 般 企业 网 站 通常 都 将 导航 放置 在 页 面 的 左上 角 ， 让 用 户 一 进入 网 站 就 能 够 看 到 。 下 面 制 


作 项 部 导航 部 分 ， 这 部 分 主要 放 在 header 对 象 中 的 menu 内 ， 如 图 15-9 所 示 。 


[3 均 饮 住宿 探 乐 保健 商务 会 议 出 蒂 指 南 同上 预订 交通 信息 
图 15-9 网 站 导航 部 分 
团 首先 使 用 Dreamweaver 建 立 一 个 xhtml 文档 ， 名 称 为 indexl.html， 在 “ 拆 分 ”视图 中 ， 输 入 如 下 
Div 代 码 建 立 导 航 部 分 框架 ， 如 图 15-10 所 示 。 


首页 


四 


Ti 
图 15-10 建立 导航 部 分 框架 图 
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下 面 定义 外 部 Div 的 整体 样式 ， 定 义 完 样式 后 的 网 页 如 图 15-11 所 示 。 


下 面 定义 header 部 分 的 宽度 、 高 度 、 浮 动 左 对 齐 、 边 距 和 背景 颜色 样式 ， 定 义 完 样式 后 的 网 页 ， 
如 图 15-12 所 示 。 


| Lu 


15-11 定义 外 部 Div 的 整体 样式 图 15-12 定义 header 部 分 的 样式 


和 课堂 实录 ~“e® 


定义 导航 菜单 menu 的 整体 外 观 样式 ， 定 义 完 样式 后 的 网 页 如 图 15-13 所 示 。 


园 使 用 如 下 代码 定义 菜单 内 列表 的 样式 和 列表 内 文字 的 样式 ， 定 义 后 的 实例 ， 如 图 15-14 所 示 。 


图 15-13 定义 导航 菜单 menu 的 整体 外 观 样式 图 15-14 定义 菜单 内 列表 的 样式 和 列表 内 文字 的 样式 


用 15.2.3 ”制作 header 右 侧 部 分 
Header 右 侧 部 分 主要 放 在 header 对 象 中 的 headerrightblank 内 ， 包 括 会 员 注册 、 登 录 、 添 加 
收藏 、 留 言 ， 还 有 高 级 搜索 部 分 ， 如 图 15-15 所 示 。 


首先 输入 如 下 Div 代 码 建立 header 右 侧 部 分 框架 ， 这 部 分 主要 使 用 无 序列 表 和 表单 来 制作 的 ， 如 
图 15-16 所 示 。 


2 司 课堂 实录 


A 


ader 右 侧 部 分 


使 用 如 下 代码 定义 headerrightblank 部 分 的 宽度 、 浮 动 右 对 齐 、 外 边 距 和 内 边 距 ， 定 义 样式 后 的 
实例 如 图 15-17 所 示 。 


C2 


图 15-16 建立 header 右 侧 部 分 框架 


接着 定义 headernav 内 无 序列 表 的 样式 ， 定义 样式 后 的 实例 如 图 15-18 所 示 。 


ee 更 SF 本 家 
六 


KA 


图 15-17 定义 headerrightblank 部 分 的 整体 样式 图 15-18 ”定义 headernav 内 无 序列 表 的 样式 


制作 企业 网 站 


园 使 用 如 下 代码 定义 无 序列 表 内 “会 员 注册 ”文字 的 样式 ， 定 义 后 的 实例 如 图 15-19 所 示 。 


园 使 用 如 下 代码 定义 无 序列 表 内 “登录 ”文字 的 样式 ， 定 义 后 的 实例 如 图 15-20 所 示 。 


图 15-19 定义 无 序列 表 内 “会 员 注 册 ” 文 字 的 样式 图 15-20 定义 无 序列 表 内 “登录 ”文字 的 样式 


2 同 识 堂 实录 “~e® 


国 使 用 如 下 代码 定义 无 序列 表 内 “添加 收藏 ”文字 的 样式 ， 定 义 后 的 实例 如 图 15-21 所 示 。 


Ev 


图 15-21 定义 无 序列 表 内 “添加 收藏 ”文字 的 样式 图 15-22 定义 无 序列 表 内 “留言 ”文字 的 样式 


国 使 用 如 下 代码 定义 宣传 文本 的 样式 如 图 15-23 所 示 。 


| 同 课堂 实录 “~e® 


国 使 用 如 下 代码 定义 搜索 部 分 的 样式 ， 如 图 15-24 所 示 。 


图 15-23 ”定义 宣传 文本 的 样式 图 15-24 使 用 如 下 代码 定义 搜索 部 分 的 样式 


使 用 如 下 代码 定义 go 搜索 按钮 的 样式 ， 如 图 15-25 所 示 。 


A 


图 15-25 定义 “go” 搜 索 按钮 的 样式 


TD 齐 堂 录 


height:16px; 
float:left; 
margin:0px; 
padding:2px 0 0 Spx; 
font-family:Arial; 
font-size:10px; 
color:#eld300; 


text-decoration:none; 


/* 定义 高 度 */ 

/* 定义 浮动 左 对 齐 */ 

/* 定义 外 边 距 为 0 */ 

/* 定义 内 边 距 */ 

/* 定义 字体 */ 

/* 定义 字号 */ 

/* 定义 颜色 */ 

/* 清除 超 链 接 的 默认 下 划 线 */ 


background-image:url (images/gobutton.jpg); 


background-repeat :no-repeat; 
.go:hover{width:26px; 

height:16px; 

float:left; 

margin:0px; 

padding:2px 0 0 Spx; 

font-family:Arial; 

font-size:10px; 

color:#eld300; 


text-decoration:none; 


background-image:url (images/gobutton.jpg); 


background-repeat :no-repeat; 


上 15.2.4 ”制作 欢迎 部 分 


/* 定义 背景 图 片 不 重复 */} 
/* 定义 宽度 */ 

/* 定义 高 度 */ 

/* 浮动 左 对 齐 */ 

/* 定义 外 边 距 为 0 */ 

/* 定义 内 边 距 */ 

/* 定义 字体 */ 

/* 定义 字号 */ 

/* 定义 颜色 */ 

/* 清除 超 链接 的 默认 下 划 线 */ 
/* 定义 背景 图 片 */ 

/* 定义 背景 图 片 不 重复 */} 


欢迎 部 分 主要 放 在 header 对 象 中 的 bannertxtblank 内 ， 包 括 欢迎 文字 信息 ， 如 图 15-26 所 示 。 


谷 度假 旅 洲 


15-26 


团 首先 输入 如 下 Div 代 码 建 立 欢迎 
比较 乱 。 
<div id="bannertxtblank"> 
<div id="bannerheading"> 
<h2> 欢 迎 到 清凉 谷 度假 旅游 </h2> 
</div> 


<div id="bannertxt"> 


<p> 度 假 村 坐落 在 落差 62 . 5 米 的 瀑布 脚下 ， 和 攒 借 90# 的 森林 覆盖 ， 桃 源 仙 谷 、 黑 龙潭 、 


部 分 框架 ， 如 


i 
er 


欢迎 部 分 


医 


15-27 所 示 ， 可 以 看 到 没有 定义 网 页 样式 ， 网 页 


云 蒙 山 国家 森林 公园 、 精 灵 谷 


等 诸多 风景 区 的 清爽 怀抱 ， 构 成 一 处 如 诗 如 画 的 绝妙 佳境 。 度 假 村 拥有 套房 、 标 准 间 百 余 套 , 独 体 别墅 六 栋 , 日 接待 能 力 350 
余人 , 配 有 能 同时 容纳 350 人 的 大 宴会 厅 、 大 小 包间 7 间 、 露 天 用 餐 的 河 边 长 廊 。</p> 

<p><span class="bannertxt"> 独 特 的 纯 实木 俄罗斯 乡村 别墅 建筑 风格 与 大 红 灯 笼 镶嵌 的 享 台 楼 阁 , 成 为 京 郊 一 
道 靓 丽 的 风景 线 。 度 假 村 经 过 1 8 年 的 发 展 ， 现 已 成 为 密云 西 线 旅游 规模 最 大 、 档 次 最 高 的 度假 村 。</span></P> 


</div> 


<div id="bannermore"><a href="#" class="bannermore"> 更 多 </a></div> 


</div> 
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图 15-28 所 示 。 


图 15-27 输入 Div 代 码 建立 欢迎 部 分 框架 图 15-28 ”定义 bannertxtblank 对 象 的 整体 外 观 样式 

# bannertxtblank{ 
width:707px; /* 定义 宽度 */ 
height:233px; /* 定义 高 度 */ 
float:left; /* 定义 浮动 左 对 齐 */ 
margin:0px; /* 定义 外 边 距 为 0 */ 
padding:63px 0 0 69px;} /* 定义 内 边 距 */ 

国 使 用 如 下 代码 定义 标题 文字 的 样式 ， 如 图 15-29 所 示 。 

#bannerheading{ 
width:687px; /* 定义 宽度 */ 
height :37px; /* 定义 高 度 */ 
float:left; /* 定义 浮动 左 对 齐 */ 
margin:Opx; /* 定义 外 边 距 为 0 */ 
padding:0Opx; /* 定义 内 边 距 为 0 */ 
font-family: Arial; /* 定义 字体 */ 
font-size:36px; /* 定义 字号 */ 
color:#e9e389;} /* 定义 颜色 */ 

#bannerheading h2{ 
width: 687px; /* 定义 宽度 */ 
height:37px; /* 定义 高 度 */ 
float:left; /* 定义 浮动 左 对 齐 */ 
margin:Opx; /* 定义 外 边 距 为 0 */ 
padding:0px; /* 定义 内 边 距 为 0 */ 
font-family: Arial; /* 定义 字体 */ 
font-size:36px; /* 定义 字号 */ 
color:#e9e389;} /* 定义 颜色 */ 


园 使 用 如 下 代码 定义 段落 文字 的 样式 ， 如 图 15-30 所 示 。 


第 15 课 李 神 症 I[B 和 天 而 


图 15-29 定义 标题 文字 的 样式 


图 15-30 定义 段落 文字 的 样式 


| 同 识 堂 实录 “~e® 


园 使 用 如 下 代码 定义 “更 多 ”按钮 的 样式 ， 如 图 15-31 所 示 。 
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Color:#FFF; /* 定义 颜色 为 白色 */ 
text-align:center; /* 定义 元 素 内 部 文字 的 居中 */ 
text-decoration:none; /* 清除 超 链接 的 默认 下 划 线 */ 
background-image: Url (images/morebuttonover.jpg) 7 
background-repeat:no-repeat7 /* 定义 背景 图 片 不 重复 */} 


区 


国 使 用 如 下 代码 定义 右 侧 展示 图 片 的 样式 ， 如 


15-32 所 示 。 


图 15-31 定义 “更 多 ”按钮 的 样式 图 15-32 定义 右 侧 展 示 图 片 的 样式 

#bannerpic{width:159px; /* 定义 宽度 */ 

height:170px; /* 定义 高 度 */ 

float:left; /* 定义 浮动 左 对 齐 */ 

margin:69px 0 0 0; /* 定义 外 边 距 */ 

padding:0px; /* 定义 内 边 距 为 0 */ 

background-image:url (images/bannerpic.jpg); 

background-repeat :no-repeat; /* 定义 背景 图 片 不 重复 */ 


国 15.2.5 制作 景点 新 闻 部 分 


景点 新 闻 部 分 主要 放 在 content 对 象 中 的 contentleft 内 ， 包 括 景点 新 闻 信息 ， 如 图 15-33 所 示 。 
园 首先 输入 如 下 Div 代 码 建立 景点 新 闻 部 分 框架 ， 这 部 分 主要 是 利用 Div 来 制作 的 ， 如 图 15-34 所 示 。 


<div id="contentleft"> 


<div id="newsheading"> 
<h3> 景 点 新 闻 </h3> 

</div> 

<div id="newstxtbg"> 

<div id="newsboldtxt">5 月 2013</div> 


<div class="newstxt"> 休 闲 一 日 套 票 188 元 /位 。 假 村 蔬菜 全 部 为 有 机 绿色 蔬菜 ， 由 度假 村 绿色 蔬菜 基地 提供 各 种 
绿色 蔬菜 。30 人 以 上 团体 ， 度 假 村 可 派 专车 免费 接送 ! <br/> 
</div> 


<div class="morenewsbutton"><a href="#" class="morenews">more</a></div> 

<div id="newsboldtxt02">4 月 2013</div> 

<div class="newstxt"><span class="boldtxt"> 清 明 假 期 开始 周末 和 假期 公交 专线 车 直达 景区 , 时 间 6-8 点 ， 

地 点 980 站 院内 , 往返 车 票 和 景区 门票 80 元 。</span>i.<br/> 

</div> 

<div class="morenewsbutton"><a href="#" class="morenews">more</a></div> 

<div id="newsboldtxt03">10 月 2012</div> 
<div class="newstxt"><span class="boldtxt">2012 年 9 月 15 日 开始 景区 采摘 开始 了 ; 地 点 ， 景区 500 米 处 ; 
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园 使 用 如 下 代码 定义 content 部 分 的 整体 外 观 样式 ， 如 图 15-35 所 示 。 


图 15-34 景点 新 闻 部 分 Div 框 架 


图 15-33 ”景点 新 闻 部 分 图 15-35 ”定义 content 部 分 的 整体 外 观 样式 
使 用 如 下 代码 定义 contentleft 对 象 的 宽度 、 浮 动 左 对 齐 、 外 边 距 和 内 边 距 ， 如 图 15-36 所 示 。 


园 使 用 如 下 代码 定义 “景点 新 闻 ” 文 字 的 样式 ， 如 图 15-37 所 示 。 
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margin:0px; /* 定义 外 边 距 为 0 */ 
padding:10px 0 0 55px; /* 定义 内 边 距 */ 
background-image:url (images/newsheading.jpg); 
background-repeat:no-repeat; /* 定义 背景 图 片 不 重复 */} 
#newsheading h3{width:230px; /* 定义 宽度 */ 
float:left; /* 定义 浮动 左 对 齐 */ 
margin:0px; /* 定义 外 边 距 为 0 */ 
padding:0px7 /* 定义 内 边 距 为 0 */ 
font-family:Arial; /* 定义 字体 */ 
font-size:29px; /* 定义 字号 */ 
font-weight:normal; 
Color:#FFF; /* 定义 颜色 为 白色 */} 


景点 新 闻 


民 景点 新 闻 


图 15-36 ”定义 contentleft 对 象 的 样式 图 15-37 定义 “景点 新 闻 ” 文 字 的 样式 
国 使 用 如 下 代码 定义 新 闻 正 文 内 容 和 新 闻 日 期 的 样式 ， 如 图 15-38 所 示 。 
#newstxtbg{width:266px; /* 定义 宽度 */ 
height :275px; /* 定义 高 度 */ 
float:left; /* 定义 浮动 左 对 齐 */ 
margin:0px; /* 定义 外 边 距 为 0 */ 
padding:19px 0 0 19px; /* 定义 内 边 距 */ 
background-image: url (images/newsbg.jpg) 7 
background-repeat:no-repeat7 /* 定义 背景 图 片 不 重复 */} 
#newsboldtxt {width:242px; /* 定义 宽度 */ 
height:19px; /* 定义 高 度 */ 
float:left; /* 定义 浮动 左 对 齐 */ 
margin:0px; /* 定义 外 边 距 为 0 */ 
padding:0 0 0 24px; /* 定义 外 边 距 */ 
font-family:Arial; /* 定义 字体 */ 
font-size:13px; /* 定义 字号 */ 
font-weight: bold; /* 定义 文字 加 粗 */ 
color:#f4ff79; /* 定义 颜色 */ 
background-image:url (images/numicon.jpg); /* 定义 背景 图 片 */ 
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国 使 用 如 下 代码 定义 more 按 钮 的 样式 ， 如 图 15-39 所 示 。 


制作 企业 网 站 


Lee | 

肖 明 很 期 开始 周末 和 很 期 公交 专 战 
区 时 间 6-8 点 ,地 点 站 院内 ,往返 革 
门票 0 元 。 


2 年 9 月 415 日 开始 景区 采摘 开始 了 ; 地 点 : 
景区 米 处 ; 品种 : 鸭 则 、 大 志 、 


板栗 等 。 


图 15-38 定义 新 闻 正文 内 容 和 新 闻 日 期 的 样式 图 15-39 ”定义 more 按 钮 的 样式 


旧 15.2.6 ”制作 景点 介绍 部 分 一 一 一 一 一 一 一 一 一 一 一 一 o 


景点 介绍 部 分 主要 放 在 content 对 象 中 的 contentleft 内 ， 包 括 景点 介绍 信息 ， 如 图 15-40 所 示 。 
首先 输入 如 下 Div 代 码 建 立 景点 介绍 部 分 框架 ， 如 图 15-41 所 示 。 


YET 课堂 实录 “ee 一 他 


图 15-40 景点 介绍 部 分 图 15-41 建立 景点 介绍 部 分 框架 
使 用 如 下 代码 定义 contentmid 对 象 的 整体 外 观 样式 ， 如 图 15-42 所 示 。 


使 用 如 下 代码 定义 “景点 介绍 ”文字 的 样式 ， 如 图 15-43 所 示 。 
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设计 制作 企业 网 关 


园 使 用 如 下 代码 定义 正文 文字 的 样式 ， 如 图 15-44 所 示 。 


图 15-42 定义 contentmid 对 象 的 整体 外 观 样式 ”图 15-43 定义 “景点 介绍 ”文字 的 样式 图 15-44 定义 正文 文字 的 样式 


2 同 课堂 实录 ~e—® 


用 15.2.7 ”制作 景点 展示 部 分 

景点 展示 部 分 主要 放 在 content 对 象 中 的 
projectblank 内 ， 包 括 景点 展示 图 片 ， 如 图 15-45 
所 示 。 


15-45 景点 展示 部 分 


设计 制作 企业 网 站 
首先 输入 如 下 Div 代 码 建立 景点 展示 部 分 框架 ， 这 部 分 主要 是 通过 插入 div 和 无 序列 表 来 实现 的 。 


使 用 如 下 代码 定义 projectblank、project 和 projectgallery 部 分 的 整体 样式 ， 如 图 15-46 所 示 。 


2 同 课堂 实录 “ee 一 他 


图 15-46 定义 整体 样式 
使 用 如 下 代码 定义 展示 的 9 幅 图 片 样式 ， 如 图 15-47 所 示 。 


制作 企业 网 着 


园 使 用 如 下 代码 定义 页 码 的 样式 ， 如 图 15-48 所 示 。 
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图 15-47 定义 展示 的 9 幅 图 片 整 体 样式 


#paging{width:294px; 


#paging 


#paging 


#paging 


#paging 


height:26px; 
float:left; 
margin:1l7px 0 0 70px; 
padding:0px; 
background-image:url (images/paging.jpg); 
background-repeat: no-repeat;} 
ul{width:294px; 
height:26px; 
float:left; 

margin: Opx; 
padding:0px; 
display:block; 

ul li{height:26px; 
float:left; 
margin:0px; 
padding:0px; 
display:block; 

ul li.sap{width:1lpx; 
height:24px; 
float:left; 
margin:lpx 0 0 0; 
padding:0px; 


word-spacing:0px; 


background-image:url (images/pagingsap.jpg); 


background-repeat:no-repeat; 
ul li a.prev{height:20px; 
float:left; 
margin:0px; 
padding:6px 9px 0 13px; 
font-family:Arial; 


图 15-48 定义 页 码 的 样式 
/* 定义 宽度 */ 
/* 定义 高 度 */ 
/* 定义 浮动 左 对 齐 */ 
/* 定义 外 边 距 */ 
/* 定义 内 边 距 为 0 */ 


/* 定义 宽度 */ 

/* 定义 高 度 */ 

/* 定义 浮动 左 对 齐 */ 
/* 定义 外 边 距 为 0 */ 
/* 定义 内 边 距 为 0 */ 
/* 定义 块 元 素 */} 
/* 定义 高 度 */ 

/* 定义 浮动 左 对 齐 */ 
/* 定义 外 边 距 为 0 */ 
/* 定义 内 边 距 为 0 */ 
/* 定义 块 元 素 */ } 
/* 定义 宽度 */ 

/* 定义 高 度 */ 

/* 定义 浮动 左 对 齐 */ 
/* 定义 外 边 距 */ 

/* 定义 内 边 距 为 0 */ 


/* 定义 背景 图 片 不 重复 */} 
/* 定义 高 度 */ 

/* 定义 浮动 左 对 齐 */ 

/* 定义 外 边 距 为 0 */ 

/* 定义 内 边 距 */ 
WE 


这 计 制 作 企 业 网 站 


2 同 课堂 实录 “~e® 


全 15.2.8 制作 底部 版 权 部 分 


底部 版 权 部 分 主要 放 在 footer 对 象 中 的 footerlinks 和 copyrights 内 ， 包 括 底部 导航 和 版 权 文字 信 
息 ， 如 图 15-49 所 示 。 


图 15-49 底部 版 权 部 分 
首先 输入 如 下 Div 代 码 ， 建 立 底部 版 权 部 分 框架 ， 如 图 15-50 所 示 。 


@ oo 第 15 课 BEHEIISTSTIO 


</div> 
</div> 
</div> 
DW SHED Bil EU RAD Ba WU HO HAD Sw Wi i 
i ou at x | 
CT 了 | 只 
天 时 视 四 。 地- EL 只 2 [EE 标 王 ， 萨 送 妨 区 辣 -| 总 
严 
本 
本 
tt 
Ze 
rrr Tr . EECIEECETZ 
图 15-50 建立 底部 版 权 部 分 框架 
园 使 用 如 下 CSS 代 码 定义 footer 部 分 的 整体 样式 ， 如 图 15-51 所 示 。 
#footerbg{width:100%; /* 定义 宽度 */ 
height :126px; /* 定义 高 度 */ 
float:left; /* 定义 浮动 左 对 齐 */ 
margin: 0px; /* 定义 外 边 距 为 0 */ 
padding:0px; /* 定义 内 边 距 为 0 */ 
background-image: url (images/footerbg.jpg) ;background-repeat :repeat-x7} 
#footerblank {width:1004px; /* 定义 宽度 */ 
height:126px; /* 定义 高 度 */ 
float: none;margin:0 auto; /* 定义 外 边 距 */ 
padding:0px;} /* 定义 内 边 距 为 0 */ 
#fo0ter {width:1004px; /* 定义 宽度 */ 
height:126px; /* 定义 高 度 */ 
float: left; /* 定义 NF */ 
margin: Opx; /* 定义 外 边 距 为 0 */ 
padding:0px;} /* 定义 内 边 距 为 0 */ 


图 15-51 定义 footer 部 分 的 整体 样式 
园 使 用 如 下 CSS 代 码 定义 导航 文字 的 样式 ， 如 图 15-52 所 示 。 


#footerlinks{width:1004pzx; /* 定义 宽度 */ 
float: left; pe 全 8 5 
margin:20px 0 0 0; /* 定义 外 边 距 */ 
padding:0px; / * 定义 内 边 距 为 0 */ 
font-family:Arial; /* 定义 字体 */ 
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font-size:11px7 /* 定义 字号 */ 
color:#c8c8c8; /* 定义 颜色 */ 
text-align:center; /* 定义 元 素 内 部 文字 的 居中 */ } 
.footerlinks{font-family:Arial; /* 定义 字体 */ 
font-size:1lpx; /* 定义 字号 */ 
color:#c8c8c8; /* 定义 颜色 */ 
text-align:center; /* 定义 元 素 内 部 文字 的 居中 */ 
text-decoration:none; /* 清除 超 链接 的 默认 下 划 线 */ 
padding:0 3px 0 3px;} /* 定义 内 边 距 */ 
.footerlinks:hover{font-family:Arial; /* 定义 字体 */ 
font-size:11px; /* 定义 字号 */ 
color:#c8c8c8; /* 定义 颜色 */ 
text-align:center; /* 定 义 元 素 内 部 文字 的 居中 */ 
text-decoration: underline; /* 定义 文字 下 划 线 */ 


padding:0 3px 0 3px;} 


图 15-52 定义 导航 文字 的 样式 


园 使 用 如 下 CSS 代 码 定义 版 权 文字 的 样式 ， 如 图 15-53 所 示 。 


#copyrights{width:1004px; /* 定义 宽度 */ 
float: left; /* 定义 浮动 左 对 齐 */ 
margin:1l0px 0 0 0; /* 定义 外 边 距 */ 
padding:0px; /* 定义 内 边 距 为 0 */ 
font-family:Arial; /* 定义 字体 */ 
font-size:11px; /* 定义 字号 */ 
color:#ade6a7; /* 定义 颜色 */ 
text-align:center; /* 定 义 元 素 内 部 文字 的 居中 */} 


定义 版 权 文字 的 样式 


图 15-53 
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CSS 属 性 一 览 表 


课堂 习 录 。 。e 外 
CSS - 文字 属性 
语 言 功 能 
color : #999999; 文字 颜色 
font-family : 宋体 ,sans-serif 文字 字体 
font-size : 9pt: 文字 大 小 
font-style:itelic; 文字 和 斜体 
font-variant:small-caps; 小 字体 
letter-spacing : 1pt; 字 间 距离 
line-height : 200%:; 设置 行 高 
font-weight:bold: 文字 粗 体 
vertical-align:sub; 下 标 字 
vertical-align:super: 上 标 字 
text-decoration:line-through; 加 删除 线 
text-decoration:overline; 加 顶 线 
text-decoration:underline; 加 下 划 线 
text-decoration:none; 删除 链接 下 划 线 
text-transform : capitalize; 首 字 大 写 
text-transform : uppercase; 英文 大 写 
text-transform : lowercase; 英文 小 写 
text-align:right; 文字 右 对 齐 
text-align:left; 文字 左 对 齐 
text-align:center:; 文字 居中 对 齐 
text-align:justify; 文字 两 端 对 齐 
vertical-align; 设置 元 素 的 垂直 对 齐 方 式 
vertical-align:top; 垂直 向 上 对 齐 
vertical-align:bottom:; 垂直 向 下 对 齐 
vertical-align:middle; 垂直 居中 对 齐 
vertical-align:text-top; 文字 垂直 向 上 对 齐 
vertical-align:text-bottom; 文字 垂直 向 下 对 齐 
CSS - 项 目 符号 
语 功 能 
list-style-type:none; 不 编号 
list-style-type:decimal; 阿拉 伯 数 字 
list-style-type:lower-roman; 小 写 罗马 数字 
list-style-type:upper-roman; 大 写 罗 马 数 字 
list-style-type:lower-alpha; 小 写 英文 字母 
list-style-type:upper-alpha; 大 写 英 文字 母 
list-style-type:disc:; 实心 圆 形 符号 
list-style-type:circle; 空心 圆 形 符号 
list-style-type:square: 实心 方形 符号 
list-style-image:url(/dot.gif) 图 片 式 符号 
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( 续 表 ) 


list-style-position:outside; 


list-style-position:inside; 


CSS - 背景 样式 


背景 颜色 
背景 图 片 
浮 水 印 固定 背景 

重复 排列 -网 页 默认 

不 重复 排列 
background-repeat : repeat-x; 在 x 轴 重 复 排列 
background-repeat : repeat-y; 在 y 轴 重复 排列 

背景 图 片 x 与 y 轴 的 位 置 


background-color:#F5E2EC:; 


background:transparent; 


background-image : url(image/bg.gif); 


background-attachment : fixed: 


background-repeat : repeat; 


background-repeat : no-repeat:; 


background-position : 90% 90%; 


background-position : 


background-position : 
background-position : 
background-position : 


background-position : center: 


CSS - 链接 属性 


超 链接 文字 格式 
a:visited 浏览 过 的 链接 文字 格式 
a:active 按 下 链接 的 格式 

息 标 转 到 链接 
cursor:crosshair 十 字体 


箭头 朝 下 


alink 


cursor:s-resize 


cursor:help 加 一 问号 
cursor:w-resize 箭头 朝 左 
cursor:n-resize 箭头 朝 上 
cursor:ne-resize 箭头 朝 右 上 
cursor:nw-resize 箭头 朝 左 上 
cursor:text 文字 I 型 
cursor:se-resize 箭头 针 右 下 
cursor:sw-resize 箭头 铬 左下 
cursor:-wait 漏斗 

CSS - 边框 属性 


border-top : 1px solid #6699cc; 上 框 线 
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( 续 表 ) 
语 言 功 能 
border-bottom : 1px solid #6699cc; 下 框 线 
border-left : 1px solid #6699cc; 左 框 线 
border-right : 1px solid #6699ce: 右 框 线 
solid 实 线 框 
dotted 虚线 框 
double 双 线 框 
groove 立体 内 凸 框 
Tidge 立体 浮雕 框 
inset 包 框 
outset 凸 框 
CSS - 表单 
语 言 功 能 
<input type=”text” name=”tl” size=”15”> | 文本 域 
<input type="submit" value="submit" 按钮 
name="bl"> 
<input type="checkbox" name="cl"> 复 选 框 
< 一 "Tadlo" ="y]" 后 R 
a Ee radio" value="v1" checked 单 选 按钮 
ee i 多 行文 本 域 
<select size=” 1” name=” dl” > 
ee A 
</select> 
CSS - 边界 样式 
语 言 功 能 
margin-top:10px; 上 边界 
margin-right: 10px: 右边 界 值 
Imargin-bottom:10px: 下 边界 值 
margin-left:10px: 左边 界 值 
CSS - 边框 空白 
语 言 功 能 
padding-top:10px: 上 边框 留 空白 
padding-right:10px: 右边 框 留 空白 
padding-bottom:10px; 下 边框 留 空白 
padding-left: 10px: 左边 框 留 空白 
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附录 B 
HTML 常 用 标签 


课堂 实录 


1， 跑马 灯 

标 签 功 能 
<marquee>...</marquee> 普通 卷 动 
<marquee behavior=slide>...</marquee> 滑动 
<marquee behavior=scroll>...</marquee> 预 设 卷 动 
<marquee behavior=alternate>...</marquee> 来 回 卷 动 
<marquee direction=down>...</marquee> 向 下 卷 动 
<marquee direction=up>...</marquee> 向 上 卷 动 
<marquee direction=right></marquee> 向 右 卷 动 
<marquee direction=left></marquee> 向 左 卷 动 
<marquee loop=2>...</marquee> 卷 动 次 数 
<marquee width=180>...</marquee> 设 定 宽度 
<marquee height=30>...</marquee> 设 定 高 度 
<marquee bgcolor=FF0000>...</marquee> 设 定 背景 颜色 
<marquee scrollamount=30>...</marquee> 设 定 卷 动 距离 
<marquee scrolldelay=300>...</marquee> 设 定 卷 动 时 间 
2. 字体 效果 

标 签 功 能 
<h1>...</h1> 标题 字 (最 大 ) 
<h6>...</h6> 标题 字 (最 小 ) 
<b>...</b> 粗 体 字 
<strong>...</strong> 粗 体 字 (强调 ) 
<i>…</i> 针 体 字 
<em>...</em> 针 体 字 (强调 ) 
<dfn>...</dfn> 斜体 字 (表示 定义 ) 
<u>.…</u> 底线 
<ins>...</ins> 底线 (表示 插入 文字 ) 
<strike>...</strike> 横 线 
<s>...</s> 删除 线 
<del>...</del> 删除 线 (表示 删除 ) 
<kbd>...</kbd> 键盘 文字 
<tt>...</tt> 打字 体 


<xmp>...</xmp> 


固定 宽度 字体 (在 文件 中 空白 、 换 行 、 定 位 功能 有 效 ) 


<plaintext>...</plaintext> 


固定 宽度 字体 ( 不 执行 标记 符号 ) 


<listing>...</listing> 固定 宽度 小 字体 
<font color=00ff00>...</font> 字体 颜色 
<font size=1>...</font> 最 小 字体 
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〈 续 表 ) 
<font style =font-size:100 px>...</font> 无 限 增 大 
3. 区 断 标记 
标 签 功 能 
<hr> 水 平 线 
<hr size=9> 水 平 线 ( 设 定 大 小 ) 


水 平 线 ( 设 定 宽度 ) 
水 平 线 ( 设 定 颜 色 ) 


<hr width=80%> 
<hr color=ff0000> 


<br> (换行 ) 
<nobr>...</nobr> 水 域 (不 换行 ) 
<p>...</p> 水 域 (段落 ) 
<center>...</center> 置 中 


4. 链 接 


( 预 设 好 连结 路 径 ) 
外 部 连结 
外 部 连结 ( 另 开 新 窗口 ) 
外 部 连结 (全 窗口 连结 ) 
外 部 连结 (在 指定 页 框 连结 ) 


<base hre 伍 地 址 > 
<a hre 伍 地 址 ></a> 
<a hre 伍 地 址 target=_blank></a> 


<a hre 作 地 址 target= _top></a> 
<a hre 伟 地址 target= 页 框 名 ></a> 


5. 图 像 /音乐 


<img src= 图 片 地 址 > 贴图 

<img src= 图 片 地 址 width=180> 设 定 图 片 宽度 
<img src= 图 片 地 址 height=30> 设 定 图 片 高 度 
<img src= 图 片 地 址 alt= 提 示 文 字 > 设 定 图 片 提示 文字 


设 定 图 片 边框 
背景 音乐 设 定 


<img src= 图 片 地 址 border=1> 
<bgsound src=MID 音 乐 文件 地 址 > 


6. 表 格 


表格 位 置 , 置 左 
表格 位 置 , 置 中 
背景 图 片 的 URIL= 就 是 路 径 网 址 
设 定 表 格 边 框 大 小 (使 用 数字 ) 
设 定 表 格 的 背景 颜色 
设 定 表格 边框 的 颜色 


<table aling=left>...</table> 


<table aling=center>...</table> 
<table background= 图 片 路 径 >...</table> 
<table border= 边 框 大 小 >.…</table> 
<table bgcolor= 颜 色 码 >..</table> 
<table borderclor= 颜 色 码 >...</table> 
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标 
<table borderclordark= 颜 色 码 >...</table> 


“ee 一 他 


( 续 表 ) 
功 能 
表格 暗 边框 的 颜色 


by 


<table borderclorlight= 赢 色 码 >...</table> 


定 表 格 亮 边 框 的 颜色 


<table cellpadding= 参 数 >...</table> 


<table cellspacing= 参 数 >...</table> 


网 格 线 与 网 格 线 之 间 的 距离 (使 用 数字 ) 


<table cols= 参 数 >...</table> 


表格 的 栏 数 


<table frame= 参 数 >...</table> 


设计 
设 ， 
指定 内 容 与 网 格 线 之 间 的 间距 (使 用 数字 ) 
指定 
指 
设 


表格 外 框 线 的 显示 方式 


<table width= 宽 度 >...</table> 


员 党 > 


表格 的 宽度 大 小 (使 用 数字 ) 


<table height= 高 度 >...</table> 


和 高 度 大 小 (使 用 数字 ) 


<td colspan= 参 数 >...</td> 


指定 储存 格 合并 栏 的 栏 数 (使 用 数字 ) 


<td rowspan= 参 数 >...</td> 


指定 储存 格 合并 列 的 列 数 (使 用 数字 ) 


